Povezava za brisanje elementa v JavaScriptu

Recimo, da imamo odstavek. Naredimo poleg njega povezavo, s katero lahko ta odstavek izbrišemo.

Izvedimo:

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

Bodite pozorni na to, da je v atributu href povezave #. Če odstranite to ločilo - bomo dobili prehod po povezavi in posledično osvežitev strani.

Pravzaprav se bo tudi brisanje odstavka zgodilo, vendar tega ne bomo opazili, saj se bo stran osvežila in vse se bo vrnilo v prvotno stanje.

Za rešitev problema je treba preprečiti prehod po povezavi z uporabo 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(); // prekličemo prehod po povezavi
});