Comment supprimer un nom de classe d'un élément via JavaScript

Comme nous sommes conscients du fait que JavaScript est couramment utilisé pour manipuler les éléments d'une page HTML à l'aide de l'interface de nœud DOM. Ces manipulations peuvent non seulement modifier le style ou les données à l'intérieur des éléments HTML, mais ils peuvent même modifier les attributs des éléments tels que les noms de classe. Changer ou supprimer un nom de classe d'un élément est un travail crucial, surtout lorsque vous travaillez avec l'animation de style sur des éléments.

Pour déplacer une animation d'un élément à un autre élément, vous ne réécrivez pas l'intégralité du script d'animation des autres éléments car cela peut augmenter la charge sur le serveur plutôt que vous écrivez un script d'animation sur les noms de classe ou les identifiants, et pour vous déplacer, vous changez simplement ou Supprimer le nom de classe ou l'ID d'un élément HTML de la page Web.

Pour supprimer le nom de classe d'un élément, nous utilisons le .liste de classe.retirer() fonction.

La syntaxe est:

élément.liste de classe.supprimer (nom de classe)

Nous allons apprendre comment nous pouvons utiliser JavaScript pour supprimer un nom de classe d'un élément sur la page Web. Pour cela, nous allons créer:

• Une page HTML de base avec un élément ayant un nom de classe que nous voulons supprimer.
• Un bouton qui invoquera la fonction.
• La fonction liée au bouton supprimera en fait le nom de classe.
• Les outils du développeur du navigateur pour vérifier la suppression du nom de la classe.

Commençons.

Configuration de la page HTML

Nous allons créer un élément avec une liste de différents noms de classe. Ce aura également un identifiant spécifique pour créer une référence à ce Lorsque nous utilisons JavaScript. Nous pouvons créer cela en utilisant les lignes suivantes:

Ceci est un div avec plusieurs classes

Nous avons une div avec les classes "Google Yahoo Bing Linuxhint" et l'ID est "LH-TUTS. Nous avons ajouté la propriété de style pour le rendre visible. Nous exécutons le fichier HTML pour obtenir la sortie suivante:

Maintenant que nous avons une page HTML de base, créons un bouton qui supprimera une classe du élément.

Nous le faisons en utilisant les lignes de code suivantes:

Supprimer la classe

Notre page Web ressemblera à ceci:

Création du code JavaScript pour supprimer la classe de l'élément

Maintenant, nous devons écrire une fonction «RemoveClass ()» dans le script. Créons donc une balise et écrivons une fonction qui supprimera la classe «Google» de la liste des classes avec les lignes suivantes:

Cette fonction doit supprimer la classe «Google» de la liste des classes de la élément. Essayons-le et vérifions la sortie avec les outils du développeur du navigateur.

Comme vous pouvez le voir, au début, le div a 4 classes différentes. Mais dès que nous appuyons sur le bouton, le nom de la classe «Google» est supprimé de la liste des noms de classe.

Nous pouvons même supprimer plusieurs classes en même temps, car nous utilisons la ligne:

div.liste de classe.supprimer ("google", "yahoo", "bing");

L'extrait de fonction deviendrait:

Maintenant, si nous examinons la sortie avec les outils du développeur du navigateur, nous obtenons:

Comme vous pouvez le voir, nous avons également pu supprimer plusieurs classes en même temps.

Approche alternative

Il y a encore une chose, nous utilisons le document.getElementByid () Pour créer une référence à l'élément, nous pouvons même utiliser le document.getElementByClassName (), Mais pour cela, nous devrons changer notre script. Comme nous ne pouvons pas nous référer à un élément à l'aide de son nom de classe, puis de supprimer un nom de classe tout en maintenant une référence à l'élément. C'est parce que le nom de classe est un «Nodeliste en direct".

Utiliser document.getElementsByClassName () Notre fonction devient:

fonction reposovelass ()
div = document.GetElementsByClassName ("Google Yahoo Bing Linuxhint");
Pendant (div.longueur)
div [0].liste de classe.retirer ("yahoo", "bing");

Puisqu'il s'agit d'un nodeliste en direct, nous prenons le premier élément de la liste et supprimons son nom de classe. Nous continuons à répéter cela jusqu'à ce que le nodeliste soit vide.

La sortie est comme:

C'est pour supprimer un nom de classe d'un élément utilisant JavaScript.

Conclusion

JavaScript peut être utilisé pour supprimer un nom de classe d'un élément HTML sur une page Web à l'aide du .liste de classe.retirer(). Il peut même être utilisé pour supprimer plusieurs classes de la liste de classe d'un élément. Pour présenter cela, nous avons créé un HTML de base avec un div élément dessus. Ensuite, nous avons codé un script pour supprimer la classe de cet élément. Nous avons examiné la sortie à l'aide des outils de développeur du navigateur et nous avons même essayé une autre façon de faire la même tâche.