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!
