Verwijderlink voor element in JavaScript

Stel we hebben een paragraaf. Laten we er een link naast maken waarmee deze paragraaf verwijderd kan worden.

Laten we het implementeren:

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

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

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

Let op het feit dat er een # staat in het href-attribuut van de link. Als we deze hekje weghalen - krijgen we een navigatie via de link en, als gevolg, een verversing van de pagina.

Eigenlijk zal het verwijderen van de paragraaf ook plaatsvinden, maar we zullen het niet merken, omdat de pagina ververst wordt en alles terugkeert naar de oorspronkelijke staat.

Om het probleem op te lossen, moet je de navigatie via de link voorkomen met preventDefault:

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

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

remove.addEventListener('click', function(event) {
  elem.remove();
  event.preventDefault(); // annuleert navigatie via de link
});