Eliminar un nodo de tipo elemento (removeChild)

El método removeChild() elimina un nodo hijo del DOM y puede devolver el nodo eliminado.

El método removeChild() elimina un nodo hijo especificado del elemento especificado.
Devuelve el nodo eliminado como un objeto Nodo o nulo si el nodo no existe.

Nota: El nodo secundario eliminado ya no forma parte del DOM. Sin embargo, con la referencia devuelta por este método, es posible insertar el elemento secundario eliminado en un elemento en un momento posterior .
Consejo: utilice el método appendChild() o insertBefore() para insertar el nodo eliminado en el mismo documento. Para insertarlo en otro documento, use el método document.adoptNode() o document.importNode() .

Sintaxis

var antiguoHijo = elemento.removeChild(child);

elemento.removeChild(child);

Parámetros

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'.

Ejemplo
Descubra si una lista tiene nodos secundarios. Si es así, elimine su primer nodo hijo (índice 0):

<!DOCTYPE html>
<html>
<body>
<! - Tenga en cuenta que los elementos <li> dentro de <ul> no están sangrados (espacios en blanco).
Si lo fueran, el primer nodo hijo de <ul> sería un nodo de texto
->
<ul id="myList"><li>Cafe</li><li>Te</li><li>Leche</li></ul>
<p>Haga clic en el botón para ver si el elemento ul tiene nodos secundarios. Si es así, elimine su primer nodo hijo (índice 0).</p>
<button onclick="myFunction()">Probar</button>
<script>
function myFunction() {
  var list = document.getElementById("myList");
  if (list.hasChildNodes()) {
    list.removeChild(list.childNodes[0]);
  }
}
</script>
</body>
</html>

Ver ejemplo anterior

Ejemplo
Elimine todos los nodos secundarios de una lista:

<!DOCTYPE html>
<html>
<body>
<ul id="myList"><li>Cafe</li><li>Te</li><li>Leche</li></ul>
<p>Haga clic en el botón para eliminar todos los nodos secundarios de ul..</p>
<button onclick="myFunction()">Probar</button>
<script>
function myFunction() {
  var list = document.getElementById("myList");
  while (list.hasChildNodes()) {
    list.removeChild(list.firstChild);
  }
}
</script>
</body>
</html>

Ver ejemplo anterior

Ejemplo
Elimine un elemento <span> de su padre e insértelo en un elemento <h1> en otro documento:

<!DOCTYPE html>
<html>
<body>
<iframe src="default.php" style="height:400px;width:650px;"></iframe>
<div id="myDIV">
  <span id="mySpan" style="font-size:35px;">Un elemento Span </span>
</div>
<p>Haga clic en un botón para eliminar el elemento span de su padre.
 
Haga click en el otro botón para insertar el elemento span eliminado en el elemento h1 del otro documento (el nuevo padre).</p>
<button onclick="removeLi()">Eliminar span</button>
<button onclick="myFunction()">Insertar span</button>
<script>
var child = document.getElementById("mySpan");
function removeLi() {
  child.parentNode.removeChild(child);
}
function myFunction() {
  var frame = document.getElementsByTagName("IFRAME")[0]
  var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
  var x = document.adoptNode(child);
  h.appendChild(x);
}
</script>
</body>
</html>

Ver ejemplo anterior

Para eliminar un nodo de tipo elemento disponemos del método removeChild, este método lo llamamos a partir del nodo padre.
Veamos un ejemplo que permita eliminar el primer o último nodo elemento:
pagina.html

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script >
var contador=1;
function agregar()
{
  var nuevoelemento=document.createElement("p"); 
  var nuevotexto=document.createTextNode("Hola Mundo " + contador + " - ");
  contador++;
  nuevoelemento.appendChild(nuevotexto);
  var puntero=document.getElementById("parrafos");
  puntero.appendChild(nuevoelemento);
}

function eliminarPrimero()
{
  var puntero=document.getElementById("parrafos");
  if (puntero.childNodes.length>0) 
    puntero.removeChild(puntero.childNodes[0]);  
}

function eliminarUltimo()
{
  var puntero=document.getElementById("parrafos");
  if (puntero.childNodes.length>0) 
    puntero.removeChild(puntero.childNodes[puntero.childNodes.length-1]);  
}

</script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="parrafos"></div>
<input type="button" value="Agregar nodo tipo elemento" onClick="agregar()">
<input type="button" value="Eliminar primer nodo tipo elemento" onClick="eliminarPrimero()">
<input type="button" value="Eliminar último nodo tipo elemento" onClick="eliminarUltimo()">
</body>
</html>

Ver ejemplo anterior

El código javascript

var contador=1;
function agregar()
{
  var nuevoelemento=document.createElement("p"); 
  var nuevotexto=document.createTextNode("Hola Mundo " + contador + " - ");
  contador++;
  nuevoelemento.appendChild(nuevotexto);
  var puntero=document.getElementById("parrafos");
  puntero.appendChild(nuevoelemento);
}

function eliminarPrimero()
{
  var puntero=document.getElementById("parrafos");
  if (puntero.childNodes.length>0) 
    puntero.removeChild(puntero.childNodes[0]);  
}

function eliminarUltimo()
{
  var puntero=document.getElementById("parrafos");
  if (puntero.childNodes.length>0) 
    puntero.removeChild(puntero.childNodes[puntero.childNodes.length-1]);  
}

La primera función nos permite crear un nodo de tipo elemento y añadirlo a otro nodo elemento de la página:

function agregar()
{
  var nuevoelemento=document.createElement("p"); 
  var nuevotexto=document.createTextNode("Hola Mundo " + contador + " - ");
  contador++;
  nuevoelemento.appendChild(nuevotexto);
  var puntero=document.getElementById("parrafos");
  puntero.appendChild(nuevoelemento);
}

Lo nuevo se encuentra en la función de eliminarPrimero:

function eliminarPrimero()
{
  var puntero=document.getElementById("parrafos");
  if (puntero.childNodes.length>0) 
    puntero.removeChild(puntero.childNodes[0]);  
}

Obtenemos una referencia al nodo elemento llamado "parrafos", si este nodo tiene nodos hijos procedemos a llamar al método removeChild y le pasamos como parámetro la referencia a su primer hijo (puntero.childNodes[0]).

Este control lo hacemos para validar que el nodo tenga nodos hijo.
Para eliminar el último nodo:

function eliminarUltimo()
{
  var puntero=document.getElementById("parrafos");
  if (puntero.childNodes.length>0) 
    puntero.removeChild(puntero.childNodes[puntero.childNodes.length-1]);  
}

Enviamos como parámetro al método removeChild la referencia del último hijo al que accedemos por medio del vector childNodes.

(adsbygoogle = window.adsbygoogle || []).push({});

Eliminar un nodo de tipo elemento (removeChild)