Ejemplo de Dom Node.removeChild

los Node.removeChild() El método elimina un nodo hijo del DOM y devuelve el nodo eliminado.

Sintaxis

var oldChild = node.removeChild(child);

O solo:

node.removeChild(child);

• child es el nodo hijo que se eliminará del DOM.
• node es el nodo padre de child.
• oldChild contiene una referencia al nodo hijo eliminado, es decir, oldChild === child.

El nodo secundario eliminado todavía existe en la memoria, pero ya no es parte del DOM. Con la primera forma de sintaxis mostrada, puede reutilizar el nodo eliminado más adelante en su código, a través del oldChild referencia de objeto.

En la segunda forma de sintaxis, sin embargo, no hay oldChild se mantuvo la referencia, por lo que suponiendo que su código no haya guardado ninguna otra referencia al nodo en otro lugar, inmediatamente se volverá inutilizable e irrecuperable, y generalmente será eliminado automáticamente de la memoria después de un corto período de tiempo.

Si child en realidad no es un hijo del element nodo, el método arroja una excepción. Esto también sucederá si child era de hecho un hijo de element en el momento de la llamada, pero fue eliminado por un controlador de eventos invocado en el curso de intentar eliminar el elemento (por ejemplo, blur.)

Errores arrojados

El método arroja una excepción de 2 formas diferentes:

1. Si el child era de hecho un hijo de element y, por lo tanto, existente en el DOM, pero se eliminó, el método arroja 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 el child no existe en el DOM de la página, el método lanza la siguiente excepción:

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

Ejemplos de

Ejemplos sencillos

Dado este HTML:

<divid="top"><divid="nested">div>div>

Para eliminar un elemento especificado al conocer su nodo padre:

let d = document.getElementById("top");let d_nested = document.getElementById("nested");let throwawayNode = d.removeChild(d_nested);

Para eliminar un elemento especificado sin tener que especificar su nodo padre:

let node = document.getElementById("nested");if(node.parentNode)
  node.parentNode.removeChild(node);

Para eliminar todos los hijos de un elemento:

let element = document.getElementById("top");while(element.firstChild)
  element.removeChild(element.firstChild);

Causando un TypeError

<divid="top">div><scripttype="text/javascript">let top = document.getElementById("top");let nested = document.getElementById("nested");// Throws Uncaught TypeErrorlet garbage = top.removeChild(nested);script>

Causando un NotFoundError

<divid="top"><divid="nested">div>div><scripttype="text/javascript">let top = document.getElementById("top");let nested = document.getElementById("nested");// This first call correctly removes the nodelet garbage = top.removeChild(nested);// Throws Uncaught NotFoundError
  garbage = top.removeChild(nested);script>

Notas

diferente a Node.cloneNode() el valor de retorno conserva el EventListeners.

Especificaciones

Compatibilidad del navegador

Ver también

• Node.replaceChild()
• Node.parentNode
• ChildNode.remove()
• Node.cloneNode()