Link zum Löschen eines Elements in JavaScript

Nehmen wir an, wir haben einen Absatz. Lassen Sie uns daneben einen Link erstellen, mit dem dieser Absatz gelöscht werden kann.

Umsetzung:

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

Beachten Sie, dass im href-Attribut des Links ein # steht. Wenn man diese Raute entfernt - erhalten wir einen Linkaufruf und als Konsequenz daraus eine Aktualisierung der Seite.

Eigentlich wird das Löschen des Absatzes auch erfolgen, aber wir werden es nicht bemerken, da die Seite aktualisiert wird und alles in die Ausgangsposition zurückkehrt.

Um das Problem zu lösen, muss der Linkaufruf mit preventDefault verhindert werden:

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