Hallo Jürgen > ~~~JavaScript > 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: ~~~JavaScript 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: ~~~JavaScript /* 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. ~~~JavaScript 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. ~~~JavaScript 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'`{: .language-javascript} oder `'afterend'`{: .language-javascript} als erstes Argument, für das Einfügen direkt vor oder direkt nach dem jeweiligen Element. -- „Dance like it hurts. Make love like you need money. Work when people are watching.“ — Dogbert

Hallo Jürgen > ~~~JavaScript > 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: ~~~JavaScript 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: ~~~JavaScript /* Polyfill for ChildNode.remove */ [ CharacterData.prototype, DocumentType.prototype, Element.prototype ].forEach(function(prototype) { if (!prototype.hasOwnProperty('remove')) { function remove() { this.parentNode && this.parentNode.removeChild(this) } Object.defineProperty(prototype, 'remove', { enumerable: true, configurable: true, writable: true, value: remove }) } }) ~~~ 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. ~~~JavaScript 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. ~~~JavaScript 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'`{: .language-javascript} oder `'afterend'`{: .language-javascript} als erstes Argument, für das Einfügen direkt vor oder direkt nach dem jeweiligen Element. -- „Dance like it hurts. Make love like you need money. Work when people are watching.“ — Dogbert