Eliminar Elementos del DOM con JavaScript: Métodos y Ejemplos

¿Cómo eliminar elementos en el DOM usando JavaScript?

Eliminar elementos del DOM es una parte vital del desarrollo web dinámica, permitiendo que las aplicaciones respondan a las interacciones y necesidades del usuario en tiempo real. Puede que necesites eliminar elementos obsoletos, innecesarios o simplemente por diseño de la funcionalidad de tu aplicación. Aquí aprenderemos cómo hacerlo utilizando JavaScript.

¿Cuáles son las principales formas de eliminar elementos?

Existen dos métodos principales para eliminar elementos del DOM:

1. Método remove: Este es un método directo que actúa sobre el elemento que deseas eliminar. Simplemente identificas el elemento, llamas al método remove() y este eliminará el elemento del DOM.

   // Seleccionamos el primer elemento de la lista
   const firstItem = document.querySelector('li');
   
   // Eliminamos el primer elemento
   firstItem.remove();
   

2. Método removeChild: Este método implica un poco más de trabajo, pues debe aplicarse sobre el elemento padre del nodo que deseas eliminar. Es útil cuando se quiere eliminar un elemento específico dentro de ciertos criterios jerárquicos en el DOM.

   // Seleccionamos el contenedor o lista
   const list = document.querySelector('ul');
   
   // Eliminamos el primer elemento hijo de la lista
   list.removeChild(list.firstElementChild);
   

¿Cómo se implementa remove en la práctica?

remove() es útil cuando ya tienes una referencia directa al elemento que deseas eliminar. Utilizas document.querySelector para obtener ese elemento y llamas a remove() sobre él.

Por ejemplo, si tienes una lista de tareas y deseas eliminar la primera tarea:

// Asumimos que el elemento que queremos borrar es el primer elemento 'li'
const task = document.querySelector('li'); 
task.remove();

¿Cuándo usar removeChild?

removeChild es útil cuando necesitas recurrir al contexto del nodo padre para remover uno de sus hijos, por ejemplo, si no tienes una referencia directa al nodo hijo, pero sí al padre.

Esto es típico en una lista (ul o ol), donde quieres eliminar, por ejemplo, el primer o último elemento de la lista:

// Obtenemos el nodo padre
const parentList = document.querySelector('ul');

// Removemos el primer hijo
parentList.removeChild(parentList.firstElementChild);

Consejo práctico

• Escoge el método que conviene a tu situación: Usa remove para máxima sencillez y cuando tengas una referencia directa al elemento. Usa removeChild cuando trabajas con dinámicas de nodos padres e hijos y necesites más control.
• Combínalos con eventos: Estos métodos son altamente potentes cuando se combinan con eventos de usuario, como un click en un botón de "eliminar" para ítems en una lista.

Atrévete a aplicar estos métodos en tus proyectos de desarrollo web. La manipulación del DOM es una habilidad esencial para construir aplicaciones interactivas y responsivas, y eliminar elementos es solo una de las muchas facetas que lo hacen posible. Sigue explorando y mejorando tus habilidades, ¡el mundo del desarrollo web es vasto y lleno de oportunidades!