Пусть у нас абзац. Давайте рядом с ним сделаем ссылку, с помощью которой этот абзац можно будет удалить.
Реализуем:
<div id="parent">
<p id="elem">text</p>
<a href="#" id="remove">remove</a>
</div>
let elem = document.querySelector('#elem');
let remove = document.querySelector('#remove');
remove.addEventListener('click', function() {
elem.parentElement.removeChild(elem);
});
Обратите внимание на то, что в атрибуте href ссылки стоит #. Если эту решетку убрать - мы получим переход по ссылке и, как следствие, обновление страницы.
На самом деле удаление абзаца тоже будет происходить, но мы это не заметим, так как страница обновится и все вернется в изначальное положение.
Для решения проблемы нужно предотвратить
переход по ссылке с помощью preventDefault
:
<div id="parent">
<p id="elem">text</p>
<a href="" id="remove">remove</a>
</div>
let elem = document.querySelector('#elem');
let remove = document.querySelector('#remove');
remove.addEventListener('click', function(event) {
elem.parentElement.removeChild(elem);
event.preventDefault(); // отменяем переход по ссылке
});
Самостоятельно, не подсматривая в мой код, решите описанную задачу.