HTML DOM Element removeChild() metode

Definition og brug

removeChild() Metoden fjerner elementets underknuder.

Denne metode returnerer et Node-objekt for det fjernede element; hvis elementet ikke findes, returneres null.

Tip

Underknuder fjernes fra dokumentobjektmodellen (DOM).

Men, du kan ændre den returnerede node og indsætte den tilbage i DOM (se eksemplet nedenfor).

Se også:

remove() metode

appendChild() metode

insertBefore() metode

replaceChild() metode

childNodes egenskab

firstChild egenskab

lastChild egenskab

firstElementChild egenskab

lastElementChild egenskab

Eksempel

Eksempel 1

Fjern den første element fra listen:

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

Før fjernelse:

  • Kaffe
  • Te
  • Mælk

Efter fjernelse:

  • Te
  • Mælk

Prøv det selv

Eksempel 2

Hvis listen har underknuder, fjern den første (indeks 0):

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

Prøv det selv

Eksempel 3

Fjern alle underknuder fra listen:

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

Prøv det selv

Eksempel 4

Fjern et element fra dens forældrenode:

element.parentNode.removeChild(element);

Prøv det selv

Eksempel 5

Fjern et element fra dens forældreelement og indsæt det igen:

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

Prøv det selv

Eksempel 6: Advarsel

Brug appendChild() eller insertBefore() til at indsætte den slettede node i samme dokument.

Man kan bruge document.adoptNode() eller document.importNode() til at indsætte det i et andet dokument.

Følgende eksempel fjerner et element fra dens forældrenelement og indsætter det i et andet dokument:

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

Prøv det selv

Syntaks

element.removeChild(node)

eller

node.removeChild(node)

Parameter

Parameter Beskrivelse
node Obligatorisk. Node (element) der skal slettes.

Returværdi

Type Beskrivelse
Node

Den slettede node (element).

Er der ingen underordnet node, er det null.

Browserstøtte

element.removeChild() er en DOM Level 1 (1998) egenskab.

Alle browsere understøtter det fuldt ud:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Støtte 9-11 Støtte Støtte Støtte Støtte