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