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

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

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

html<div id="parent">
  <p id="elem">text</p>
  <a href="#" id="remove">remove</a>
</div>

javascriptlet elem   = document.querySelector('#elem');
let remove = document.querySelector('#remove');

remove.addEventListener('click', function() {
  elem.remove();
});

Обрнете внимание на тоа што во атрибутот href на врската стои #. Ако оваа тараба се тргне - ќе добиеме премин преку врската и, како резултат, превчитување на страницата.

Всушност, бришењето на параграфот исто така ќе се случи, но ние тоа нема да го забележиме, бидејќи страницата ќе се превчита и сè ќе се врати во првобитната состојба.

За решавање на проблемот треба да се спречи преминувањето преку врската со помош на preventDefault:

html<div id="parent">
  <p id="elem">text</p>
  <a href="" id="remove">remove</a>
</div>

javascriptlet elem   = document.querySelector('#elem');
let remove = document.querySelector('#remove');

remove.addEventListener('click', function(event) {
  elem.remove();
  event.preventDefault(); // го откажува преминувањето преку врската
});