Método remove de JavaScript

Autor: | Última modificación: 7 de noviembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

El Document Object Model, también conocido como el DOM, es un concepto que funciona como un árbol jerárquico de etiquetas HTML al que podemos acceder directamente dentro de nuestro código JS. Para ello, existen diversos métodos y propiedades que nos permiten acceder al DOM y manipular sus elementos. En este post, te enseñaremos qué es y cómo funciona el método remove de JavaScript, fundamental para eliminar nodos del DOM.

¿Qué es el método remove de JavaScript?

El método remove de JavaScript es una función nativa del DOM que nos permite acceder a un elemento específico de nuestro documento HTML y eliminarlo. Para ello, primero deberemos acceder al nodo que queremos eliminar usando alguno de los métodos que te hemos enseñado en nuestro post sobre seleccionar nodos del DOM.

A continuación, te mostramos cómo seleccionamos un nodo con el método querySelector y su nombre de clase. Ten presente que este tipo de selecciones pueden guardarse dentro de una variable usando las palabras clave const let o var. Esto nos permite acceder de manera más fácil a una selección con la que ejecutaremos diversas acciones, en vez de tener que ejecutar el método de selección cada vez.

const loader = document.querySelector («.loader»);

Ahora que tenemos esta selección, podemos aplicar el método remove de JavaScript de la siguiente manera:

loader.remove ( );

O también se puede aplicar directamente sobre el método de selección, según las necesidades de cada proyecto:

document.querySelector («.loader»).remove ( );

Si quieres conocer otros ejemplos de este método, te invitamos a revisar el artículo element.remove ( ) de la página oficial de la Mozilla Developer Network. Ten presente que, como el nombre de este artículo indica, este método surge de cualquier nodo HTML. En este sentido, podríamos imaginarlo como un primo del método appendChild del DOM, pues ambos son métodos que se ejecutan sobre nodos HTML.

¿Cómo funciona el método remove de JavaScript?

El método remove de JavaScript elimina un nodo del DOM por completo. Esto quiere decir que ya no aparecerá como un elemento del DOM una vez eliminado, por lo que no se verá en el navegador.

Para entender mejor este proceso de eliminación, te recomendamos tener abierto el inspector de tu navegador y probar el método revisando la sección de elementos. Allí verás que el elemento seleccionado desaparece del árbol jerárquico del DOM. Si tienes dudas sobre esta herramienta, te recomendamos leer nuestro post sobre cómo entender el DOM desde el inspector.

Aunque este método es muy útil cuando queremos eliminar un elemento por completo, el problema con el método remove de JavaScript llega cuando necesitamos hacer aparecer y desaparecer un elemento varias veces en nuestro proyecto. Entonces, utilizar este método para hacer desaparecer el elemento nos forzará a cargarlo o montarlo en el DOM de nuevo cada vez que lo queramos hacer aparecer.

Esta situación puede causar problemas en el performance de nuestros proyectos cuando el elemento a eliminar es frecuente. Por ejemplo, una ruleta de carga para acceder a datos paginados. Entonces, cada vez que el usuario pase de página y se pidan los nuevos datos a la base, la ruleta tendrá que ser cargada y eliminada del DOM desde 0. Por este tipo de situaciones, a veces es mejor utilizar otros métodos de eliminación, como la propiedad classList de JavaScript.

¿Qué sigue?

Ahora que sabes qué es y cómo funciona el método remove de JavaScript, ¡te invitamos a seguir aprendiendo sobre este lenguaje de programación! Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás en profundidad herramientas y lenguajes como JavaScript, HTML, CSS y JSX para crear todo tipo de proyectos web. ¡No te lo pierdas y pide información ahora!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!