Como eliminar nodos del DOM mediante Javascript

Como eliminar nodos del DOM mediante Javascript

Print Friendly, PDF & Email
Como eliminar nodos del DOM mediante Javascript
Valora esta entrada
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.

eliminar nodos DOM javascript
Eliminar nodos en un documento web mediante Javascript

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];

Entradas relacionadas:

Ejercicio – Acoplamiento de javascript en un documento web
- 263
Ejercicio y solución de un problema introductorio al mundo del Javascript.
Ejercicio – Vamos a dormir, hay 100 ovejas que contar
- 134
Ejercicio javascript dónde se practica el uso de for y de while para la resolución de un mismo problema JS. Incluye solución.
Introducción a los eventos javascript
- 383
Repasamos las distintas formas que existen de asociar eventos javascript a etiquetas html. Ya sea por acoplamiento directo o como evento semántico. Comparamos también con addEventListener()
Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS
- 182
Ejemplo de programación de un script que devuelve una hora con formato personalizado hh:mm:ss.
LibrosWeb ahora es UniWebSidad
- 206
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Control de acceso con cookies Javascript para web de mayores de edad
- 94
Ejercicio avanzado de javascript para controlar el acceso de usuarios a una página web mediante el uso de cookies. Incluye solución.
Función que crea un objeto y lo almacena en una lista en Javascript
- 573
Javascript es un lenguaje basado en el uso de objetos. Los objetos son recursos que nos permiten agrupar un conjunto de propiedades alrededor de una idea común. Un constructor es un tipo especial de f...
Ejercicio – Escribir un texto almacenado en una variable
- 178
Este es un simple ejercicio cuyo objetivo es únicamente coger un poco de soltura usando expresiones típicas en javascript.
Ejercicio – ¿En qué día de la semana estamos?
- 155
Problema javascript que devuelve en formato texto el día de la semana en el que esamos. Incluye 2 posibles soluciones con switch() y array.
Javascript: Estructura básica de un script
- 1211
¿Qué es programar? Programar es indicar a una máquina que siga un conjunto ordenado de instrucciones. Es una acción cotidiana que realizamos sin apercibirnos cuando seguimos una receta de cocina. Y si...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.