Node: removeChild()-Methode

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

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

Wenn der Rückgabewert von removeChild() nicht gespeichert wird und kein anderer Verweis beibehalten wird, wird es nach kurzer Zeit automatisch aus dem Speicher gelöscht.

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

Syntax

removeChild(child)

Parameter

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

Ausnahmen

NotFoundError DOMException: Wird ausgelöst, wenn child kein Kind des Knotens ist.
TypeError: Wird ausgelöst, wenn child null ist.

Beispiele

Einfache Beispiele

Gegeben ist dieses HTML:

html

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

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

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

Um ein bestimmtes Element zu entfernen, ohne seinen übergeordneten Knoten angeben zu müssen:

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

Um alle Kinder von einem Element zu entfernen:

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

Einen TypeError verursachen

html

<!--Sample HTML code-->
<div id="parent"></div>

const parent = document.getElementById("parent");
const child = document.getElementById("child");

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

Einen NotFoundError verursachen

html

<!--Sample HTML code-->
<div id="parent">
  <div id="child"></div>
</div>

const parent = document.getElementById("parent");
const child = document.getElementById("child");

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

// Throws NotFoundError
garbage = parent.removeChild(child);

Spezifikationen

Specification
DOM Standard # dom-node-removechild

Browser-Kompatibilität

BCD tables only load in the browser