Como eliminar nodos del DOM mediante Javascript

En entradas anteriores hemos repasado como acceder al DOM.

Sabemos identificar nodos en un documento web.

Los tratamos como objetos para modificar su contenido HTML y también sus atributos. Incluido el CSS y otras propiedades de interés.

Y nos queda pendiente hablar sobre como eliminar los nodos de una página web mediante Javascript.

Hoy hablaremos sobre la propiedad .removeChild( )

Estrategia para eliminar nodos del DOM

En JS un nodo no tiene la capacidad de autodestruirse.

Para ello necesitamos acceder a un nodo referencia y entonces eliminar el que indiquemos expresamente.

Existe una forma de hacerlo que a mi me gusta mucho. Sería algo así como:

nodo.parentNode.removeChild(nodo);

La estrategia consiste en acceder a un nodo. A partir de él acceder a su nodo padre/madre. Y una vez identificamos su nodo superior entonces es cuando con removeChild lo eliminamos.

Me gusta hacerlo de este modo porqué así no necesito recordar otros métodos de javascript también muy útiles (como por ejemplo firstChild() pero que terminan exigiendo una gran dosis de memoria.

Como eliminar el último o el primero de una lista de nodos anidados

Imaginemos que tenemos un <div> con varios párrafos anidados.

Como haríamos para modificar el primero o el último de los párrafos de la lista?

Con la estrategia mencionada anteriormente es relativamente fácil.

La clave está en saber identificar correctamente cada nodo.

En realidad existen instrucciones prefabricadas que pueden realizar el trabajo de identificar el primer nodo o el último de manera sencilla.

Pero a mi no me gusta.

Cuantas menos instrucciones tengo que recordar mejor.

Por esta razón la estrategia que yo sigo la resuma en las siguientes 2 instrucciones.

Para eliminar el primero de los párrafos anidados dentro de un <div>:

var primerParrafo = document.querySelectorAll(«div p»)[0];
primerParrafo.parentNode.removeChild(primerParrafo);

Para eliminar el último de los párrafos anidados dentro de un <div>:

var parrafos = document.querySelectorAll(«div p»);
var ultimoParrafo = parrafos[parrafos.length-1];