Node.removeChild()

Die Methode Node.removeChild() entfernt einen Kindknote aus dem DOM. Gibt den entfernten Knoten zurück.

Syntax

var oldChild = element.removeChild(child);
ODER
element.removeChild(child);

• child ist der Kindknoten, der aus dem DOM entfernt werden soll.
• element is der Elternknoten von child.
• oldChild hält eine Referenz auf den entfernten Kindknoten. oldChild === child.

Der entfernte Kindknoten bleibt im Speicher erhalten, ist aber nicht länger Teil des DOM. Mit der ersten Syntax-Form ist es möglich, den entfernten Knoten später im Code wieder zu verwenden, über die oldChild Objektreferenz. In der zweiten Form wird jedoch keine oldChild-Refernenz behalten, also wird (vorausgesetzt dass nirgendwo anders im Code eine Referenz gehalten wird) der Knoten unbenutzbar und nicht erreichbar, und wird nach kurzer Zeit automatisch aus dem Speicher entfernt. 

Wenn child kein Kind des Knotens element ist, wirft die Methode eine Exception. Dies passiert auch wenn child zwar zum Aufruf der Methode ein Kind von element war, aber durch einen beim Entfernen des Knotens aufgerufenen Event Handler bereits aus dem DOM entfernt wurde (z.B. blur).

Beispiele

<!-- Beispiel HTML -->

<div id="top" align="center">
  <div id="nested"></div>
</div>

// Ein bestimmtes Element entfernen, wenn der Elternknoten bekannt ist
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

// Ein bestimmtes Element entfernen, ohne den Elternknoten zu kennen
var node = document.getElementById("nested");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}

// Alle Kindknoten eines Elements entfernen
var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

Spezifikation

• DOM Level 1 Core: removeChild
• DOM Level 2 Core: removeChild
• DOM Level 3 Core: removeChild

Siehe auch

• Node.replaceChild
• Node.parentNode
• ChildNode.remove