Andrew Andrew - 4 months ago 43
Javascript Question

Remove class from elements in pure Javascript?

I would like to know how to select all elements with class names "widget" and "hover" and then remove class "hover" from these elements.

I have the following Javascript code that selects all elements with class "widget" and "hover":

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


This seems to work and outputs something like this (with no errors):

[div#.widget...


The problem is that if I try to remove the class "hover", I get an error:

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


This outputs:

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


Can anyone tell me what I'm doing wrong?

Please note that I have it working in jQuery:

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


...but I'm looking for a solution in pure Javascript.

Thanks for any help.

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

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

You can patch .classList into IE9. Otherwise, you'll need to modify the .className.

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

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

The .forEach() also needs a patch for IE8, but that's pretty common anyway.