Node: Método removeChild()

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

Nota: Mientras se mantenga una referencia sobre el elemento hijo eliminado, seguirá existiendo en la memoria, pero ya no forma parte del DOM. Todavía se puede reutilizar más adelante en el código.

Si el valor devuelto de removeChild() no se almacena y no se guarda ninguna otra referencia, se eliminará automáticamente de la memoria al cabo de un breve tiempo.

A diferencia de Node.cloneNode(), el valor devuelto conserva los objetos EventListener asociados con él.

Sintaxis

removeChild(child)

Parámetros

child: Un Node que es el nodo hijo que se eliminará del DOM.

Excepción

NotFoundError DOMException: Se lanza si child no es un hijo del nodo.
TypeError: Se lanza si child es null.

Ejemplos

Ejemplos simples

Dado este HTML:

html

<div id="parent">
  <div id="child"></div>
</div>

Para eliminar un elemento específico cuando se conoce su nodo principal:

const parent = document.getElementById("parent");
const child = document.getElementById("child");
const throwawayNode = parent.removeChild(child);

Para eliminar un elemento específico sin tener que especificar su nodo principal:

const node = document.getElementById("child");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}

Para eliminar todos los hijos de un elemento:

const element = document.getElementById("idOfParent");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

Causar un TypeError

html

<!--Código HTML de muestra-->
<div id="parent"></div>

const parent = document.getElementById("parent");
const child = document.getElementById("child");

// Arroja Uncaught TypeError
const garbage = parent.removeChild(child);

Causar un NotFoundError

html

<!--Código HTML de muestra-->
<div id="parent">
  <div id="child"></div>
</div>

const parent = document.getElementById("parent");
const child = document.getElementById("child");

// Esta primera llamada elimina correctamente el nodo.
const garbage = parent.removeChild(child);

// Arroja NotFoundError
garbage = parent.removeChild(child);

Especificaciones

Specification
DOM Standard # dom-node-removechild

Compatibilidad con navegadores

BCD tables only load in the browser