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 JS – Rellenar contenidos usando el DOM
- 49
Serie de ejercicios resueltos del tutorial Javacript. Uso básico del DOM. Incluye el repaso básico de teoria a leer y explicación.
Ejercicio – Escribir un texto almacenado en una variable
- 63
Este es un simple ejercicio cuyo objetivo es únicamente coger un poco de soltura usando expresiones típicas en javascript.
Ejercicio – Vamos a dormir, hay 100 ovejas que contar
- 53
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.
Métodos javascript
- 260
Javascript es un lenguaje basado en métodos. Existen muchos métodos predefinidos que afectan a arrays, strings, números y casi cualquier variable de tipo objeto. Veamos un resumen de los más important...
Ejercicio – Crear una lista de recordatorios
- 57
Ejercicio javascript solucionado para crear una lista de recordatorios y que es capaz de resetear todos los nodos. Apuntes de clase.
Métodos imprescindibles para trabajar con fechas en Javascript
- 187
Compendio de métodos para trabajar con fechas en Javascript. Comparto mi chuleta de métodos para obtener y crear nuevas fechas.
Onresize window para calcular el width y el height disponibles
- 256
Explicamos como podemos obtener el ancho y la altura real disponibles de la ventana del navegador mediante Javascript puro y con jQuery
Ejercicio – ¿Qué declaraciones de variables son erróneas en JS?
- 111
En este ejercicio repasamos los conceptos relativos a la declaración de variables en javascript. ¿Qué declaraciones son incorrectas? Detéctalas y corrígelas.
Ejercicio JS – Crear un cronómetro con javascript
- 36
Completo cronómetro JS dónde se usa setInterval, addEventListener, removeEventListener y se repasan conceptos de CSS. Incluye solución.
3 formas de cambiar la ubicación de búsqueda en Google
- 144
En esta entrada encontrarás 3 formas distintas de modificar tu ubicación de búsqueda en google sin necesidad de que te tengas que desplazar.
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.