HTML DOM Element removeChild() Methode

Definition und Verwendung

removeChild() Diese Methode löscht die Kindknoten des Elements.

Diese Methode gibt einen Node-Objekt zurück, das gelöscht wurde; wenn der Knoten nicht existiert, wird null.

Hinweis

Kindknoten werden aus dem Dokumentobjektmodell (DOM) entfernt.

Man kann jedoch den zurückgegebenen Knoten ändern und ihn in den DOM zurück einfügen (siehe das Beispiel unten).

Siehe auch:

remove() Methode

appendChild() Methode

insertBefore() Methode

replaceChild() Methode

childNodes Eigenschaft

firstChild Eigenschaft

lastChild Eigenschaft

firstElementChild Eigenschaft

lastElementChild Eigenschaft

Beispiel

Beispiel 1

Den ersten Element aus der Liste entfernen:

const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);

Vor dem Löschen:

  • Kaffee
  • Tee
  • Milch

Nach dem Löschen:

  • Tee
  • Milch

Selbst ausprobieren

Beispiel 2

Wenn die Liste Kindknoten hat, wird der erste (Index 0) gelöscht:

const list = document.getElementById("myList");
if (list.hasChildNodes()) {
  list.removeChild(list.children[0]);
}

Selbst ausprobieren

Beispiel 3

Alle Kindknoten aus der Liste entfernen:

const list = document.getElementById("myList");
while (list.hasChildNodes()) {
  list.removeChild(list.firstChild);
}

Selbst ausprobieren

Beispiel 4

Ein Element aus dem Elternelement entfernen:

element.parentNode.removeChild(element);

Selbst ausprobieren

Beispiel 5

Ein Element aus seinem Elternelement entfernen und erneut einfügen:

const element = document.getElementById("myLI");
function removeLi() {
  element.parentNode.removeChild(element);
}
function appendLi() {
  const list = document.getElementById("myList");
  list.appendChild(element);
}

Selbst ausprobieren

Beispiel 6: Hinweis

Verwenden Sie appendChild() oder insertBefore(), um den gelöschten Knoten in das gleiche Dokument einzufügen.

Es kann document.adoptNode() oder document.importNode() verwendet werden, um es in ein anderes Dokument einzufügen.

Nachfolgendes Beispiel zeigt, wie ein Element aus seinem Elternelement entfernt und in ein anderes Dokument eingefügt wird:

const child = document.getElementById("mySpan");
function remove() {
  child.parentNode.removeChild(child);
}
function insert() {
  const frame = document.getElementsByTagName("IFRAME")[0]
  const h = frame.contentWindow.document.getElementsByTagName("H1")[0];
  const x = document.adoptNode(child);
  h.appendChild(x);
}

Selbst ausprobieren

Syntax

element.removeChild(node)

oder

node.removeChild(node)

Parameter

Parameter Beschreibung
node Erforderlich. Der zu löschende Knoten (Element).

Rückgabewert

Typ Beschreibung
Node

Gelöschter Knoten (Element).

Falls der Kindknoten nicht existiert, ist er null.

Browserunterstützung

element.removeChild() Es ist eine Eigenschaft von DOM Level 1 (1998).

Es wird von allen Browsern vollständig unterstützt:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützt 9-11 Unterstützt Unterstützt Unterstützt Unterstützt