web-dev-qa-db-fra.com

Comment supprimer une classe d'éléments en JavaScript pur?

Je voudrais savoir comment sélectionner tous les éléments avec les noms de classe "widget" et "survoler", puis supprimer la classe "survoler" de ces éléments.

J'ai le code JavaScript suivant qui sélectionne tous les éléments avec la classe "widget" et "hover":

var elements = document.getElementsByClassName('widget hover');
console.log(elements);

Cela semble fonctionner et produire quelque chose comme ceci (sans erreur):

[div#.widget...

Le problème est que si j'essaie de supprimer la classe "hover", j'obtiens une erreur:

var elements = document.getElementsByClassName('widget hover');
console.log(elements);
elements.classList.remove("hover");

Cela génère:

[item: function]
length: 0
Uncaught TypeError: Cannot call method 'remove' of undefined

Quelqu'un peut-il me dire ce que je fais mal?


Veuillez noter que je l’utilise dans jQuery:

$('.widget.hover').removeClass('hover');

... mais je cherche une solution en JavaScript pur.

javascriptgetelementsbyclassname
50
Andrew
var elems = document.querySelectorAll(".widget.hover");

[].forEach.call(elems, function(el) {
    el.classList.remove("hover");
});

Vous pouvez patcher .classList Dans IE9. Sinon, vous devrez modifier le .className.

var elems = document.querySelectorAll(".widget.hover");

[].forEach.call(elems, function(el) {
    el.className = el.className.replace(/\bhover\b/, "");
});

La .forEach() a également besoin d'un patch pour IE8, mais c'est quand même assez courant.

70
cookie monster

Rechercher des éléments:

var elements = document.getElementsByClassName('widget hover');

Puisque elements est un tableau live et reflète tous les changements de dom, vous pouvez supprimer toutes les classes hover avec une simple boucle while:

while(elements.length > 0){
    elements[0].classList.remove('hover');
}
15
Veikko Karsikko

éléments est un tableau d'objets DOM. Tu devrais faire quelque chose comme ça

for (var i = 0; i < elements.length; i++) {
   elements[i].classList.remove('hover');
}

ie: énumérer la collection d'éléments, et pour chaque élément de la collection, appelez la méthode remove

9
nemo

Cela pourrait aider

let allElements = Array.from(document.querySelectorAll('.widget.hover'))
for (let element of allElements) {
  element.classList.remove('hover')
}
1
Faiyaz Shaikh