Método removeChild() del Elemento DOM HTML

Definición y uso

removeChild() Este método elimina los nodos hijos del elemento.

Este método devuelve un objeto Node del nodo eliminado; si el nodo no existe, devuelve null.

Consejo

Los nodos hijos se eliminan del modelo de objeto de documento (DOM).

Sin embargo, se puede modificar el nodo devuelto y volver a insertarlo en el DOM (véase el ejemplo siguiente).

Véase también:

Método remove()

Método appendChild()

Método insertBefore()

Método replaceChild()

Propiedad childNodes

Propiedad firstChild

Propiedad lastChild

Propiedad firstElementChild

Propiedad lastElementChild

Ejemplo

Ejemplo 1

Elimine el primer elemento de la lista:

const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);

Antes de eliminar:

  • Café
  • Té
  • Leche

Después de eliminar:

  • Té
  • Leche

Prueba por tu cuenta

Ejemplo 2

Si la lista tiene nodos hijos, elimine el primero (índice 0):

const list = document.getElementById("myList");
if (list.hasChildNodes()) {
  list.removeChild(list.children[0]);
}

Prueba por tu cuenta

Ejemplo 3

Elimine todos los nodos hijos de la lista:

const list = document.getElementById("myList");
while (list.hasChildNodes()) {
  list.removeChild(list.firstChild);
}

Prueba por tu cuenta

Ejemplo 4

Elimine un elemento de su nodo padre:

element.parentNode.removeChild(element);

Prueba por tu cuenta

Ejemplo 5

Elimine un elemento de su elemento padre e inserte de nuevo:

const element = document.getElementById("myLI");
function removeLi() {
  element.parentNode.removeChild(element);
}
function appendLi() {
  const list = document.getElementById("myList");
  list.appendChild(element);
}

Prueba por tu cuenta

Ejemplo 6: Notificación

Utilice appendChild() o insertBefore() para insertar el nodo eliminado en el mismo documento.

Se puede usar document.adoptNode() o document.importNode() para insertarlo en otro documento.

El siguiente ejemplo elimina un elemento de su elemento padre y lo inserta en otro documento:

const child = document.getElementById("mySpan");
function remove() {
  child.parentNode.removeChild(child);
}
function insert() {
  const frame = document.getElementsByTagName("IFRAME")[0]
  const h = frame.contentWindow.document.getElementsByTagName("H1")[0];
  const x = document.adoptNode(child);
  h.appendChild(x);
}

Prueba por tu cuenta

Sintaxis

element.removeChild(node)

o

node.removeChild(node)

Parámetros

Parámetros Descripción
node Requerido. Nodo (elemento) a eliminar.

Valor devuelto

Tipo Descripción
Node

Nodo eliminado (elemento).

Si el nodo hijo no existe, es null.

Compatibilidad del navegador

element.removeChild() Es una característica del Nivel 1 de DOM (1998).

Todos los navegadores lo soportan completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte