Node: removeChild() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die removeChild()-Methode der Node-Schnittstelle entfernt ein Kindknoten aus dem DOM und gibt den entfernten Knoten zurück.

Hinweis: Solange eine Referenz auf das entfernte Kind beibehalten wird, existiert es noch im Speicher, ist aber nicht mehr Teil des DOM. Es kann später im Code noch wiederverwendet werden.

Wenn der Rückgabewert von removeChild() nicht gespeichert wird und keine andere Referenz besteht, wird es automatisch gelöscht aus dem Speicher nach kurzer Zeit.

Anders als bei Node.cloneNode() behält der Rückgabewert die mit ihm verbundenen EventListener-Objekte bei.

Syntax

js
removeChild(child)

Parameter

child

Ein Node, der der Kindknoten ist, der aus dem DOM entfernt werden soll.

Rückgabewert

Der entfernte child-Knoten.

Ausnahmen

NotFoundError DOMException

Wird ausgelöst, wenn child kein Kind des Knotens ist.

TypeError

Wird ausgelöst, wenn child null ist.

Beispiele

Einfache Beispiele

Gegebenes HTML:

html
<div id="parent">
  <div id="child"></div>
</div>

Um ein bestimmtes Element zu entfernen, wenn dessen übergeordneter Knoten bekannt ist:

js
const parent = document.getElementById("parent");
const child = document.getElementById("child");
const throwawayNode = parent.removeChild(child);

Um ein bestimmtes Element zu entfernen, ohne dessen übergeordneten Knoten anzugeben:

js
const node = document.getElementById("child");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}

Um alle Kinder eines Elements zu entfernen:

js
const element = document.getElementById("idOfParent");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

Hervorrufen eines TypeError

html
<!--Sample HTML code-->
<div id="parent"></div>
js
const parent = document.getElementById("parent");
const child = document.getElementById("child");

// Throws Uncaught TypeError
const garbage = parent.removeChild(child);

Hervorrufen eines NotFoundError

html
<!--Sample HTML code-->
<div id="parent">
  <div id="child"></div>
</div>
js
const parent = document.getElementById("parent");
const child = document.getElementById("child");

// This first call correctly removes the node
const garbage = parent.removeChild(child);

// Second call throws NotFoundError
parent.removeChild(child);

Spezifikationen

Specification
DOM
# dom-node-removechild

Browser-Kompatibilität

Siehe auch