Удалить класс из элементов в чистом Javascript?

Я хотел бы знать, как выбрать все элементы с именами классов "widget" и "hover", а затем удалить класс "hover" из этих элементов.

У меня есть следующий код Javascript, который выбирает все элементы с помощью класса "widget" и "hover":

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

Кажется, что это работает и выводит что-то вроде этого (без ошибок):

[div#.widget...

Проблема в том, что если я попытаюсь удалить класс "hover", я получаю сообщение об ошибке:

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

Выводится:

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

Может ли кто-нибудь сказать мне, что я делаю неправильно?

Обратите внимание, что я работаю в jQuery:

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

... но я ищу решение в чистом Javascript.

Спасибо за любую помощь.

Ответы

Ответ 1

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

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

Вы можете вставить патч .classList в IE9. В противном случае вам нужно будет изменить .className.

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

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

В теге .forEach() также нужен патч для IE8, но это все равно довольно часто.

Ответ 2

Элементы

представляют собой массив объектов DOM. Вы должны сделать что-то вроде этого

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

т.е.: перечислить коллекцию элементов, а для каждого элемента внутри вызова коллекции метод remove

Ответ 3

Найти элементы:

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

Так как elements является массивом live и отражает все изменения dom, вы можете удалить все классы hover с помощью простого цикла while:

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