Button auflösen

[Orlok]

Hallo Jürgen

button.addEventListener("click", function() {
  this.parentNode.removeChild(this);
}); 

Ich würde es vorziehen, das Elternelement explizit mit parentElement anzusprechen. Das einzige Element in einem Dokument, das kein Elternelement besitzt, ist das html-Element und wolltest du das entfernen, könntest du auch direkt document als dessen Elternknoten referenzieren. Die Eigenschaft parentNode würde ich nur dann verwenden, wenn es sich um ein DocumentFragment handelt.

Das heißt nicht, das parentNode hier falsch ist, aber warum im Ungefähren bleiben, wenn man sich auch präzise ausdrücken kann? Der Ausdruck ist aber selbst mit parentElement an Stelle von parentNode unnötig umständlich. Es gibt nun schon seit einer ganzen Weile die Schnittstelle ChildNode, die unter anderem von der Schnittstelle Element implementiert wird und die eine Methode mit dem Namen remove enthält:

button.addEventListener('click', () => button.remove())

Damit kann ein Element auch ohne Umweg über seinen Elternknoten entfernt werden. In so ziemlich allen heute relevanten Browsern. Abgesehen vom Internet Explorer natürlich. Wer den auch noch mitnehmen will, braucht ein Polyfill, aber das ist leicht gebastelt. Der Code ist der gleiche wie in deinem Beispiel oben:

/* Polyfill for ChildNode.remove */

[
    CharacterData.prototype,
    DocumentType.prototype,
    Element.prototype

].forEach(function(prototype) {

    if (!prototype.hasOwnProperty('remove')) {

        prototype.remove = function() {
            this.parentNode && this.parentNode.removeChild(this)
        }

    }
})

Davon abgesehen gibt es noch ein paar weitere nützliche Methoden, die von ChildNode bereitgestellt werden. Für den Fall das es dich interessiert und du noch nicht damit vertraut bist:

Mit der Methode before kann eine beliebige Anzahl Knoten direkt vor einem Kindknoten eingefügt werden. Das hat man früher mit insertBefore^[1] ja auch über den jeweiligen Elternknoten gemacht, wobei immer nur ein Knoten eingefügt werden konnte.

childNode.before(element1, element2, 'text1', 'text2')

Genau so wie bei der Schwestermethode after werden als Argument übergebene Strings automatisch in Textknoten umgewandelt. Das ist also dasselbe, als würde man in dem Beispiel oben document.createTextNode oder new Text mit den Strings aufrufen.

childNode.replaceWith(element1, element2, 'text1', 'text2')

Auch für das Ersetzen gibt es nun eine variadische Funktion, die direkt auf dem Knoten aufgerufen werden kann, der aus dem DOM entfernt werden soll. Das ist komfortabler zu bedienen, als replaceChild auf dem Elternknoten aufzurufen.

Viele Grüße,

Orlok

---

---

1. Oder halt mit insertAdjacentElement oder insertAdjacentText, wenn das Kontextobjekt ein Element war und wenn man sich merken konnte, welcher String als Positionsparameter anzugeben ist. – In diesem Fall 'beforebegin' oder 'afterend' als erstes Argument, für das Einfügen direkt vor oder direkt nach dem jeweiligen Element. ↩︎