Javascript para novatos 23º: Eliminar nodos del DOM

Método removeChild()

Con este método podemos eliminar un nodo hijo de un elemento especificado. Se llama al método desde el nodo padre y se pasa como parámetro el nodo hijo.

<ul>
       <li>Ford</li>
       <li>Maserati</li>
       <li>Seat</li>
</ul>

<script>

       var nodoPadre = document.getElementsByTagName("ul")[0];
       var primerHijo = document.getElementsByTagName("li")[0];

       nodoPadre.removeChild(primerHijo);           

</script>

// 23.1

En este ejemplo removeChild eliminará el nodo hijo «primerHijo» del padre «nodoPadre».

Método replaceChild()

Este método reemplaza un nodo hijo por un nuevo nodo. Se llama al método desde el nodo padre y se pasan como parámetros primero el nodo nuevo y segundo el nodo que será sustituido.

<ul>
       <li>Ford</li>
       <li>Maserati</li>
       <li>Seat</li>
</ul>

<script>

       var nuevoElemento = document.createElement("li");
       var textoElemento = document.createTextNode("Audi");  // Creamos el nuevo elemento y el texto que contendrá        

       var nodoPadre = document.getElementsByTagName("ul")[0];
       var primerHijo = document.getElementsByTagName("li")[0];  // Localizamos el nodo padre y el nodo hijo.

       nuevoElemento.appendChild(textoElemento);  // Añadimos el texto al elemento

       nodoPadre.replaceChild(nuevoElemento, primerHijo); 

</script>

// 23.2

En la última línea de código del ejemplo de arriba, se puede ver cómo desde el nodo padre y con «replaceChild()» reemplazamos el nodo hijo «primerHijo» por «nuevoElemento».

Hasta aquí, la eliminación de nodos. En el siguiente capítulo conoceremos cómo modificar su contenido.

Ir a Javascript para novatos 24º