Supprimer tous les éléments avec une classe spécifique à l'aide de JavaScript

Lors de la mise à jour d'une page Web ou du site, certains éléments sont associés aux fonctions qui doivent être supprimées instantanément. Par exemple, omettre une fonctionnalité particulière (avoir plusieurs effets) à partir d'une page Web sur le bouton cliquer. Dans de telles situations, la suppression de tous les éléments avec une classe spécifique utilisant JavaScript est une fonctionnalité très utile pour créer un site Web convivial et gagner du temps.

Ce blog illustrera les approches pour supprimer tous les éléments avec des classes spécifiques à l'aide de JavaScript.

Comment supprimer tous les éléments avec une classe spécifique en utilisant JavaScript?

Pour supprimer tous les éléments avec une classe spécifique à l'aide de JavaScript, implémentez les approches suivantes en combinaison avec le «pour chaque()" et "retirer()»Méthodes:

• "queySelectorall ()" méthode.
• "Déployer.depuis()" et "getElementsByClassName ()«Méthodes.

Illustrons les méthodes déclarées une par une!

Approche 1: Supprimez tous les éléments avec une classe spécifique en JavaScript à l'aide de la méthode QueySelectorall ()

Le "pour chaque()»La méthode applique une fonction pour chaque élément contenu dans un tableau. Le "retirer()»La méthode omet un élément du document. Tandis que le "queySelectorall ()»Méthode récupère tous les éléments correspondant à un (s) sélecteur (s) CSS et donne une liste de nœuds en retour. Ces méthodes peuvent être appliquées en combinaison pour récupérer divers éléments avec des classes identiques, parcourir chaque élément et les supprimer sur le bouton CLIC.

Syntaxe

déployer.foreach (fonction (courant, index, array), ceci)

Dans la syntaxe donnée ci-dessus:

• fonction: C'est la fonction qui doit être exécutée pour chaque élément dans un tableau.
• actuel: Ce paramètre signifie la valeur actuelle du tableau.
• indice: Il pointe vers l'index de l'élément actuel.
• déployer: Il fait référence au tableau actuel.
• ce: Il correspond à la valeur transmise à la fonction.

document.QuerySelectorall (sélecteurs)

Dans la syntaxe donnée:

• "sélecteurs»Correspond à un ou plusieurs sélecteur CSS.

Exemple
Passons par l'exemple suivant:

C'est une image

Cliquez pour supprimer les éléments

Appliquez les étapes suivantes dans l'extrait de code ci-dessus:

• Dans le code HTML, le «

  " et "»Les éléments, respectivement, ont les mêmes classes.

• Créez également un bouton ayant un "sur clic”Événement invoquant la fonction de suppression ().
• Maintenant, dans le code JS, déclarez une fonction nommée «Suppro DoutureElement ()".
• Dans sa définition, appliquez le «queySelectorall ()”Méthode et pointez la classe spécifiée par rapport aux éléments comme indiqué dans la première étape.
• Après cela, invoquez le «pour chaque()»Méthode pour accéder à chaque élément via itération.
• Enfin, appliquez le «retirer()”Méthode pour supprimer les éléments itérés à l'étape précédente contre la classe récupérée.
• Cela entraînera la suppression de tous les éléments ayant la classe particulière sur le bouton cliquer.

Sortir

Dans la sortie ci-dessus, on peut observer que les éléments visibles du modèle d'objet de document sont supprimés sur le bouton cliquer.

Approche 2: Supprimez tous les éléments avec une classe spécifique en JavaScript à l'aide du tableau.From () et getElementsByClassName () Méthodes

Le "Déployer.depuis()»La méthode renvoie un tableau d'un objet ayant la longueur du tableau comme paramètre. Le "getElementsByClassName ()«La méthode donne une collection d'élément avec un (s) nom (s) de classe spécifié (s). Ces méthodes peuvent être combinées pour accéder aux éléments par classe et revenir et les supprimer en itérant à travers eux.

Syntaxe

Déployer.De (objet, carte, valeur)

Dans la syntaxe donnée ci-dessus:

• "objet»Fait référence à l'objet à convertir en un tableau.
• "carte»Correspond à la fonction de carte qui doit être mappée sur chaque élément.
• "valeur"Cou soutient la valeur à utiliser comme"ce”Pour la fonction de carte.

document.getElementsByClassName (classe)

Dans la syntaxe donnée:

• "classe»Représente le nom de classe de l'élément.

Exemple
Passons à l'exemple suivant:

Retirer les éléments

Cliquez pour supprimer les éléments

Dans les lignes de code ci-dessus:

• De même, incluez le «

  ", et le "”Des éléments ayant les mêmes classes.

• De même, créez un bouton avec un "sur clic”Redirection de l'événement vers la fonction de suppression ().
• Dans le code JavaScript, définissez une fonction nommée «Suppro DoutiSelements ()".
• Dans sa définition, appliquez le «Déployer.depuis()" et "getElementsByClassName ()»Méthodes en combinaison pour retourner les éléments récupérés par rapport à la classe spécifiée sous la forme d'un tableau.
• Après cela, appliquez le «pour chaque()" et "retirer()«Méthodes pour itérer dans les éléments à l'étape précédente et les supprimer sur le bouton CLIC, respectivement.

Sortir

La sortie ci-dessus signifie que la fonctionnalité souhaitée est remplie.

Conclusion

Le "pour chaque()" et "retirer()«Méthodes combinées avec le«queySelectorall ()«Méthode ou«Déployer.depuis()" et "getElementsByClassName ()«Les méthodes peuvent être utilisées pour supprimer tous les éléments avec des classes spécifiques à l'aide de JavaScript. Les anciennes méthodes peuvent être appliquées pour accéder aux éléments par classe directement et les supprimer en itérant le long d'eux, impliquant moins de complexité de code. Ces dernières méthodes peuvent être mises en œuvre en combinaison pour accéder aux éléments par classe, les renvoyer sous la forme d'un tableau et les supprimer en itérant à travers eux. Cet article a expliqué comment supprimer tous les éléments avec une classe spécifique en utilisant JavaScript.