Nuoroda elemento pašalinimui su JavaScript

Tarkime, kad turime pastraipą. Padarykime šalia jos nuorodą, kurios pagalba ši pastraipa galės būti pašalinta.

Įgyvendinkime:

html<div id="parent">
  <p id="elem">tekstas</p>
  <a href="#" id="remove">pašalinti</a>
</div>

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

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

Atkreipkite dėmesį į tai, kad nuorodos href atribute yra #. Jei šią grotelę pašalinsime - gausime navigaciją per nuorodą ir, kaip pasekmę, puslapio atnaujinimą.

Iš tikrųjų pastraipos pašalinimas taip pat įvyks, bet mes to nepastebėsime, nes puslapis atsikraus ir viskas grįš į pradinę būseną.

Problemai išspręsti reikia užkirsti kelią navigacijai per nuorodą naudojant preventDefault:

html<div id="parent">
  <p id="elem">tekstas</p>
  <a href="" id="remove">pašalinti</a>
</div>

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

remove.addEventListener('click', function(event) {
  elem.remove();
  event.preventDefault(); // atšaukiame navigaciją per nuorodą
});