Node.removeChild()

Sintaxis

El m茅todo Node.removeChild() elimina un nodo hijo del DOM y puede devolver el nodo eliminado.

var antiguoHijo = elemento.removeChild(child);
O
elemento.removeChild(child);
  • child es el nodo hijo a eliminar del DOM.
  • elemento es el nodo padre de hijo.(ver nota mas abajo)
  • antiguoHijo tiene una referencia al hijo eliminado. antiguoHijo === child.

El hijo(child) eliminado a煤n existe en memoria pero ya no es parte del DOM. Con la primera forma de sintaxis mostrada, se puede reutilizar el nodo eliminado m谩s tarde en el c贸digo, por medio de la referencia al objeto antiguoHijo. Sin embargo, en la segunda forma, la referencia a antiguoHijo se pierde, y suponiendo que el c贸digo no mantenga una referencia a ese objeto en alguna otra parte, inmediatamente ser谩 inutilizable e irrecuperable y ser谩 eliminada autom谩ticamente de memoria despu茅s de poco tiempo.

Si hijo(child) no es en realidad hijo del nodo elemento, el m茅todo lanza una excepci贸n. Esto tambi茅n suceder谩 si child es en realidad hijo de elemento al momento de llamar al m茅todo, pero fue eliminado por un controlador(manejador) de eventos(event handler) invocado en el curso de tratar de eliminar el elemento. (e.g. blur).

Por lo tanto el m茅todo removeChild(child) lanza una excepci贸n de 2 casos diferentes: 

1.      Si child es un hijo del elemento y por lo tanto existe en el DOM, pero se retir贸 el m茅todo lanza la siguiente excepci贸n:

鈥嬧Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

2.      Si child no existe en el DOM de la p谩gina, el m茅todo emite la siguiente excepci贸n:

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

Ejemplos

<!--Ejemplo 1 HTML-->
<div id="top" align="center"> </div>
<!--Javascript-->
// El m茅todo lanza la excepci贸n correspondiente al (caso 2)
var top = document.getElementById("top");
var nested = document.getElementById("nested");
var garbage = top.removeChild(nested);
<!--Ejemplo 2 HTML-->
<div id="top">
   <div id="anidados"></div> 
</div>
<!--Javascript-->
// Eliminando un elemento espec铆fico cuando se conoce su nodo padre
var d = document.getElementById("top");
var d_nested = document.getElementById("anidados");
var throwawayNode = d.removeChild(d_nested);
<!--Javascript-->
// Eliminando un elemento espec铆fico utilizando la propiedad parentNode, que siempre hace referencia al nodo padre de un nodo (nodoHijo.parentNode.).
nodo var = document.getElementById("anidados");
if (node.parentNode) {
  node.parentNode.removeChild(nodo);
}
<!--Javascript-->
// Eliminando todos los hijos de un elemento
elemento var = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

Notas:

removeChild() se debe invocar sobre el nodo padre del nodo que se va a eliminar.

Especificaci贸n

Vea tambi茅n