Eliminar elementos del DOM en JavaScript es una tarea común cuando trabajas con interfaces dinámicas como listas de compras, carritos o tableros editables. Aquí aprenderás dos formas directas de remover elementos del DOM: el método remove() y el método removeChild(), ambos útiles según el control que necesites sobre la jerarquía del HTML.

¿Cuándo conviene eliminar elementos del DOM?

Piensa en una lista de compras. Tu usuario agrega ocho productos, llega al supermercado y se da cuenta de que solo necesita cuatro. Esos cuatro elementos sobrantes ya no aportan valor a la interfaz, así que tienes que sacarlos del DOM. Lo mismo aplica para tareas completadas, notificaciones leídas o cualquier nodo que dejó de tener utilidad.

¿Qué significa eliminar un elemento del DOM? Significa quitar un nodo HTML del árbol del documento para que deje de mostrarse y deje de ocupar memoria en la página.

¿Cómo usar el método remove en JavaScript?

El método remove() es la forma más rápida y directa. Tomas el elemento que quieres borrar, le aplicas .remove() y desaparece del DOM. No necesitas conocer a su padre ni su posición.

Primero seleccionas el elemento. Como en el ejemplo no había id ni class específicos, se usa querySelector, que devuelve el primer elemento que coincida con el selector.

javascript const firstItem = document.querySelector('li'); firstItem.remove();

Con eso, el primer li de la lista se va. Si tenías cuatro elementos, te quedan tres. Es ideal cuando ya tienes una referencia directa al nodo que quieres borrar [02:30].

¿Por qué usar querySelector para seleccionar el elemento?

Porque querySelector te entrega el primer elemento que cumple con el selector CSS que pasas como argumento. Si escribes li, no te devuelve toda la lista, solo el primero. Esto te ahorra recorrer arrays o usar índices cuando solo necesitas un nodo puntual.

¿Cómo funciona removeChild y cuándo usarlo?

La segunda forma es removeChild(), un método que se aplica sobre el contenedor padre y recibe como argumento el hijo específico que quieres eliminar. Esto te da más control jerárquico, especialmente cuando trabajas con listas, menús o estructuras anidadas.

En lugar de seleccionar el hijo directamente, seleccionas el contenedor. En este caso, la lista no ordenada:

javascript const list = document.querySelector('ul'); list.removeChild(list.firstElementChild);

Lo que estás diciendo aquí es: del contenedor ul, quiero que remuevas a su primer hijo elemento. Con firstElementChild apuntas al primer nodo hijo que sea un elemento HTML, ignorando nodos de texto o comentarios [04:15].

¿Cuál es la diferencia entre remove y removeChild? remove() se llama directamente sobre el elemento a eliminar. removeChild() se llama sobre el padre y recibe al hijo como argumento.

¿Qué propiedades puedes combinar con removeChild?

La fuerza de removeChild está en que puedes combinarlo con propiedades de navegación del DOM para apuntar a hijos específicos sin saber su contenido:

• firstElementChild para el primer hijo elemento.
• lastElementChild para el último hijo elemento.
• Referencias guardadas previamente en variables para hijos intermedios.

Esto te permite escribir lógica genérica del tipo "borra siempre el primero" o "borra siempre el último", sin importar qué texto o datos tenga el nodo en ese momento.

¿Qué forma de eliminar elementos deberías elegir?

Depende del contexto. Si ya tienes el elemento seleccionado y solo quieres deshacerte de él, remove() es más limpio y legible. Si estás trabajando desde el padre y necesitas eliminar hijos según su posición jerárquica, removeChild() encaja mejor.

Ambos métodos modifican el DOM en vivo, así que el cambio se refleja inmediatamente en la interfaz del usuario. Lo importante es que sepas seleccionar bien el nodo, ya sea el elemento mismo o su contenedor, antes de borrarlo.

¿Cuál de los dos métodos vas a usar primero en tu próximo proyecto? Cuéntame en los comentarios qué tipo de lista estás construyendo y cómo planeas manejar la eliminación de sus elementos.