javascript - como - getelementsbyclassname style

¿Cómo eliminar una clase de elementos en JavaScript puro?

Question

Me gustaría saber cómo seleccionar todos los elementos con los nombres de clase "widget" y "hover" y luego eliminar la clase "hover" de estos elementos.

Tengo el siguiente código JavaScript que selecciona todos los elementos con la clase "widget" y "hover":

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

Esto parece funcionar y produce algo como esto (sin errores):

[div#.widget... 

El problema es que si trato de eliminar la clase "hover", aparece un error:

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

Esto produce:

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

¿Alguien puede decirme lo que estoy haciendo mal?

Tenga en cuenta que lo tengo trabajando en jQuery:

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

... pero estoy buscando una solución en JavaScript puro.

Answer 1

Encontrar elementos:

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

Dado que los elements son una matriz en live y reflejan todos los cambios dom, puedes eliminar todas las clases hover con un simple ciclo while:

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

Answer 2

Esto podría ayudar

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

Answer 3

elementos es una matriz de objetos DOM. Deberías hacer algo como esto

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

es decir: enumere la colección de elementos, y para cada elemento dentro de la colección llame al método remove

Answer 4

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

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

Puede parchar .classList en IE9. De lo contrario, deberá modificar el .className .

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

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

.forEach() también necesita un parche para IE8, pero eso es bastante común de todos modos.