Node.removeChild()

var antiguoHijo = elemento.removeChild(hijo);
O
element.removeChild(hijo);

• hijo es el nodo hijo a eliminar del DOM.
• elemento es el nodo padre de hijo.
• antiguoHijo tiene una referencia al hijo eliminado. antiguoHijo === hijo.

El hijo 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 no es en realidad hijo del nodo elemento, el método lanza una excepción. Esto también sucederá si hijo es en realidad hijo de elemento al momento de llamar al método, pero fue eliminado por un gestor de eventos invocado en el curso de tratar de eliminar el elemento. (e.g. blur).

Ejemplos

<!-- Código muestra HTML -->

<div id="top" align="center">
  <div id="nested"></div>
</div>

// Eliminando un elemento específico cuando se conoce su nodo padre
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

// Eliminando un elemento específico sin tener que especificar su nodo padre.

var node = document.getElementById("nested");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}

// Eliminando todos los hijos de un elemento
var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

Especificación

• DOM Level 1 Core: removeChild
• DOM Level 2 Core: removeChild
• DOM Level 3 Core: removeChild

Vea también

• Node.replaceChild
• Node.parentNode
• ChildNode.remove