HTML DOM Element removeChild() methode

Definitie en gebruik

removeChild() Deze methode verwijdert de sub-knooppunten van het element.

Deze methode retourneert een Node-object van het verwijderde knoop; als het knoop niet bestaat, wordt null.

Tip

Sub-knooppunten worden verwijderd uit het Document Object Model (DOM).

Maar, je kunt de teruggegeven knoop wijzigen en terug invoegen in de DOM (zie het voorbeeld hieronder).

Zie ook:

remove() methode

appendChild() methode

insertBefore() methode

replaceChild() methode

childNodes-eigenschap

firstChild-eigenschap

lastChild-eigenschap

firstElementChild-eigenschap

lastElementChild-eigenschap

Voorbeeld

Voorbeeld 1

Verwijder het eerste element van de lijst:

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

Voor verwijderen:

  • Koffie
  • Thee
  • Melk

Na verwijderen:

  • Thee
  • Melk

Probeer het zelf

Voorbeeld 2

Als de lijst sub-knooppunten heeft, verwijder dan de eerste (index 0):

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

Probeer het zelf

Voorbeeld 3

Alle sub-knooppunten van de lijst verwijderen:

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

Probeer het zelf

Voorbeeld 4

Een element verwijderen van zijn ouder-knoop:

element.parentNode.removeChild(element);

Probeer het zelf

Voorbeeld 5

Een element verwijderen van zijn ouder-element en opnieuw invoegen:

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

Probeer het zelf

Voorbeeld 6: Prompt

Gebruik appendChild() of insertBefore() om de verwijderde knoop in hetzelfde document in te voegen.

U kunt het gebruiken met document.adoptNode() of document.importNode() om het in een andere document in te voegen.

Het volgende voorbeeld verwijdert een element van zijn ouder element en voegt het toe aan een andere document:

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);
}

Probeer het zelf

Syntaxis

element.removeChild(node)

of

node.removeChild(node)

Parameter

Parameter Beschrijving
node Verplicht. De te verwijderen knoop (element).

Retourwaarde

Type Beschrijving
Node

Het verwijderde knoop (element).

Als de subnode niet bestaat, is het null.

Browserondersteuning

element.removeChild() Is een DOM Level 1 (1998) kenmerk.

Alle browsers ondersteunen het volledig:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Ondersteuning 9-11 Ondersteuning Ondersteuning Ondersteuning Ondersteuning