Metodo removeChild() dell'Elemento DOM HTML

Definizione e uso

removeChild() Il metodo rimuove i figli dell'elemento.

Questo metodo restituisce un oggetto Node del nodo rimosso; se il nodo non esiste, viene restituito null.

Suggerimento

I nodi figli vengono rimossi dal Document Object Model (DOM).

Ma è possibile modificare il nodo restituito e reinserirlo nel DOM (vedi l'esempio sottostante).

Vedi anche:

Metodo remove()

Metodo appendChild()

Metodo insertBefore()

Metodo replaceChild()

Proprietà childNodes

Proprietà firstChild

Proprietà lastChild

Proprietà firstElementChild

Proprietà lastElementChild

Esempio

Esempio 1

Rimuovi il primo elemento dalla lista:

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

Prima di rimuovere:

  • Caffè
  • Tè
  • Latte

Dopo aver rimosso:

  • Tè
  • Latte

Prova personalmente

Esempio 2

Se la lista ha nodi figli, elimina il primo (indice 0):

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

Prova personalmente

Esempio 3

Rimuovi tutti i nodi figli dalla lista:

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

Prova personalmente

Esempio 4

Rimuovi un elemento dal suo nodo padre:

element.parentNode.removeChild(element);

Prova personalmente

Esempio 5

Rimuovi un elemento dal suo elemento padre e inseriscilo di nuovo:

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

Prova personalmente

Esempio 6: Suggerimento

Usa appendChild() o insertBefore() per inserire il nodo rimosso nello stesso documento.

Puoi usarlo per inserirlo in un altro documento con document.adoptNode() o document.importNode().

Esempio: rimuove un elemento dal suo elemento padre e lo inserisce in un altro documento:

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

Prova personalmente

Sintassi

element.removeChild(node)

o

node.removeChild(node)

Parametro

Parametro Descrizione
node Obbligatorio. Il nodo (elemento) da eliminare.

Valore di ritorno

Tipo Descrizione
Node

Nodo (elemento) rimosso.

Se il nodo figlio non esiste, è null.

Supporto del browser

element.removeChild() È una caratteristica di DOM Level 1 (1998).

Tutti i browser supportano completamente:

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