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

Cuando trabajas con el DOM en JavaScript, no solo necesitas crear y agregar elementos, sino también eliminarlos. Piensa en una lista de compras donde el usuario agregó elementos de más y ahora quiere quitarlos. Dominar la eliminación de nodos es fundamental para construir interfaces dinámicas y limpias.

¿Cuáles son las dos formas de eliminar elementos del DOM?

Existen dos métodos principales para remover elementos del DOM, cada uno con un enfoque distinto según lo que necesites lograr.

¿Cómo funciona el método remove?

El método remove es la forma más rápida y directa [0:55]. Su funcionamiento es simple: seleccionas el elemento que quieres eliminar y le aplicas .remove(). El nodo desaparece del DOM de inmediato.

Por ejemplo, si quieres eliminar el primer elemento <li> de una lista, puedes usar querySelector para obtenerlo. A diferencia de querySelectorAll, querySelector devuelve únicamente el primer elemento que coincida con el selector [3:20].

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

• querySelector('li') selecciona el primer <li> que encuentra en el documento.
• .remove() lo elimina directamente del DOM.
• La lista pasa de cuatro elementos a tres de forma instantánea.

¿Cómo funciona el método removeChild?

El método removeChild trabaja desde una perspectiva jerárquica [1:15]. En lugar de apuntar directamente al elemento, seleccionas su contenedor padre y le indicas cuál de sus hijos quieres remover.

Este enfoque es útil cuando sabes que siempre quieres eliminar, por ejemplo, el primer o el último hijo, sin importar cuál sea su contenido.

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

• Primero seleccionas el contenedor padre, en este caso el <ul> [4:15].
• Luego usas removeChild() pasándole como argumento el hijo que deseas eliminar.
• firstElementChild apunta al primer elemento hijo del contenedor.

¿Cuándo usar remove y cuándo removeChild?

La diferencia clave está en el nivel de control que necesitas. Con remove(), trabajas directamente sobre el elemento que ya identificaste, lo cual lo hace ideal cuando tienes una referencia clara al nodo. Con removeChild(), operas desde el padre, lo que te permite usar propiedades como:

• firstElementChild: el primer hijo del contenedor.
• lastElementChild: el último hijo del contenedor.
• Cualquier referencia a un hijo específico que conozcas dentro de la estructura.

Esto significa que removeChild resulta más flexible cuando necesitas eliminar elementos de forma relativa dentro de una lista o contenedor, sin necesidad de conocer el contenido exacto del nodo [5:30].

¿Qué papel juega querySelector en la eliminación de elementos?

Antes de eliminar cualquier elemento, primero debes seleccionarlo. En los ejemplos mostrados, querySelector cumple un rol esencial porque permite buscar elementos incluso cuando no tienen clases ni IDs asignados [2:50]. Basta con pasar el nombre de la etiqueta HTML como selector.

Un detalle importante: si solo existe un <ul> en todo el documento, puedes usar document.querySelector('ul') con total confianza de que obtendrás el elemento correcto [4:30].

Estas dos técnicas cubren los escenarios más comunes de eliminación de nodos en el DOM. Si ya dominas la creación y la inserción, ahora cuentas con las herramientas completas para manipular elementos de principio a fin. ¿Has tenido algún caso donde necesites eliminar elementos de forma condicional? Comparte tu experiencia.