Slet element link i JavaScript

Lad os sige, at vi har et afsnit. Lad os lave et link ved siden af det, som kan bruges til at slette dette afsnit.

Lad os implementere:

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

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

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

Bemærk venligst, at der står en # i linkets href-attribut. Hvis denne # fjernes - får vi et linkklik og som følge heraf en sideopdatering.

Faktisk vil sletningen af ​​afsnittet også ske, men vi vil ikke lægge mærke til det, fordi siden opdateres, og alt vender tilbage til udgangspunktet.

For at løse problemet er det nødvendigt at forhindre linket i at blive fulgt ved hjælp af preventDefault:

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

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

remove.addEventListener('click', function(event) {
  elem.remove();
  event.preventDefault(); // annullerer linkets standardadfærd
});