Врска за бришење на елемент во JavaScript

Да претпоставиме дека имаме параграф. Ајде покрај него да направиме врска со која ќе може да се избрише овој параграф.

Да го имплементираме:

<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.remove();
});

Обрнете внимание на тоа што во атрибутот 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.remove();
	event.preventDefault(); // го откажува преминувањето преку врската
});

Самостојно, без да гледате во мојот код, решете ја опишаната задача.