Lenke for sletting av element i JavaScript

La oss si at vi har et avsnitt. La oss lage en lenke ved siden av det som denne avsnittet kan bli slettet med.

La oss implementere:

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

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

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

Legg merke til at i lenkens href-attributt står det #. Hvis vi fjerner dette #-tegnet - får vi et lenkeklikk og, som en konsekvens, oppdatering av siden.

Egentlig vil sletting av avsnittet også skje, men vi vil ikke merke det, fordi siden oppdateres og alt returnerer til utgangsposisjonen.

For å løse problemet må vi forhindre lenkeklikket med preventDefault:

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

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

remove.addEventListener('click', function(event) {
  elem.remove();
  event.preventDefault(); // avbryter lenkeklikket
});