Tutorial de DHTML : Temarios

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.
pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</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>

funciones.js

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.

16 - Eliminar un nodo de tipo elemento (removeChild)