Eliminar todos los elementos con clase específica usando JavaScript
Este blog ilustrará los enfoques para eliminar todos los elementos con clases específicas usando JavaScript.
Cómo eliminar todos los elementos con una clase específica usando JavaScript?
Para eliminar todos los elementos con una clase específica que usa JavaScript, implementa los siguientes enfoques en combinación con el "para cada()" y "eliminar()" métodos:
- "QuerySelectorAll ()" método.
- "Formación.de()" y "getElementsByClassName ()" métodos.
Ilustremos los métodos establecidos uno por uno!
Enfoque 1: Elimine todos los elementos con clase específica en JavaScript utilizando el método QuerySelectorAll ()
El "para cada()El método "aplica una función para cada elemento contenido en una matriz. El "eliminar()El método omite un elemento del documento. Mientras que el "QuerySelectorAll ()El método "obtiene todos los elementos que coinciden con un selector (s) CSS y proporciona una lista de nodos a cambio. Estos métodos se pueden aplicar en combinación para obtener varios elementos con clases idénticas, iterar a través de cada elemento y retirarlos sobre el clic del botón.
Sintaxis
formación.foreach (función (corriente, índice, matriz), esto)En la sintaxis dada anteriormente:
- función: Es la función que se ejecutará para cada elemento en una matriz.
- actual: Este parámetro significa el valor de la matriz actual.
- índice: Señala el índice del elemento actual.
- formación: Se refiere a la matriz actual.
- este: Corresponde al valor que se pasa a la función.
En la sintaxis dada:
- "selectores"Corresponde a uno o más de un selector CSS.
Ejemplo
Pasemos por el siguiente ejemplo:
Esta es una imagen
Aplique los siguientes pasos en el fragmento de código anterior:
- En el código HTML, el "" y ""Elementos, respectivamente, tienen las mismas clases.
- Además, cree un botón que tenga un "al hacer clic"Evento invocar la función removeLements ().
- Ahora, en el código JS, declare una función llamada "removerElement ()".
- En su definición, aplique el "QuerySelectorAll ()"Método y apunte a la clase especificada contra los elementos como se indica en el primer paso.
- Después de eso, invoca el "para cada()"Método para acceder a cada elemento a través de iteración.
- Por último, aplique el "eliminar()Método para eliminar los elementos iterados en el paso anterior contra la clase obtenida.
- Esto dará como resultado la eliminación de todos los elementos que tengan la clase particular al hacer clic en el botón.
Producción
En la salida anterior, se puede observar que los elementos visibles en el modelo de objeto de documento se eliminan en el clic del botón.
Enfoque 2: Elimine todos los elementos con clase específica en JavaScript usando Array.de () y métodos GetElementsByClassName ()
El "Formación.de()El método "devuelve una matriz de un objeto que tiene la longitud de la matriz como su parámetro. El "getElementsByClassName ()El método "proporciona una colección de elementos con un nombre de clase especificado (s). Estos métodos se pueden combinar para acceder a los elementos por clase y devolverlos y eliminarlos iterando a través de ellos.
Sintaxis
Formación.Desde (objeto, mapa, valor)En la sintaxis dada anteriormente:
- "objeto"Se refiere al objeto para convertirse en una matriz.
- "mapa"Corresponde a la función de mapa que debe asignarse en cada elemento.
- "valor"Señala el valor que se utilizará como"este"Para la función de mapa.
En la sintaxis dada:
- "clase"Representa el nombre de clase del elemento.
Ejemplo
Pasemos al siguiente ejemplo:
Eliminar los elementos
En las líneas de código anteriores:
- Del mismo modo, incluya el "", y el ""Elementos que tienen las mismas clases.
- Del mismo modo, cree un botón con un "al hacer clic"Redirección de eventos a la función RemoLeLements ().
- En el código JavaScript, defina una función llamada "removeLements ()".
- En su definición, aplique el "Formación.de()" y "getElementsByClassName ()"Métodos en combinación para devolver los elementos recuperados contra la clase especificada en forma de una matriz.
- Después de eso, aplique el "para cada()" y "eliminar()"Métodos para iterar a través de los elementos en el paso anterior y eliminarlos sobre el clic del botón, respectivamente.
Producción
La salida anterior significa que se cumple la funcionalidad deseada.
Conclusión
El "para cada()" y "eliminar()"Métodos combinados con el"QuerySelectorAll ()"Método o"Formación.de()" y "getElementsByClassName ()Los métodos se pueden utilizar para eliminar todos los elementos con clases específicas utilizando JavaScript. Los métodos anteriores se pueden aplicar para acceder a los elementos por clase directamente y eliminarlos iterando a lo largo de ellos involucrando menos complejidad del código. Los últimos métodos se pueden implementar en combinación para acceder a los elementos por clase, devolverlos en forma de una matriz y eliminarlos iterando a través de ellos. Este artículo explicó cómo eliminar todos los elementos con una clase específica usando JavaScript.