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.
The syntax for Removing CSS classes to an element:removeClass(class_name);
To remove all classes from an element, set the element's className property to an empty string, e.g. box. className = '' . Setting the element's className property to an empty string empties the element's class list.
To remove a class from an element, you use the remove() method of the classList property of the element.
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.
Find elements:
var elements = document.getElementsByClassName('widget hover');
Since elements
is a live
array and reflects all dom changes you can remove all hover
classes with a simple while loop:
while(elements.length > 0){
elements[0].classList.remove('hover');
}
Times have changed and now the cleanest and most readable way to do this is:
Array.from(document.querySelectorAll('.widget.hover')).forEach((el) => el.classList.remove('hover'));
If you can't support arrow functions then just convert it like this:
Array.from(document.querySelectorAll('.widget.hover')).forEach(function(el) {
el.classList.remove('hover');
});
Additionally if you need to support extremely old browsers then use a polyfil for the forEach
and Array.from
and move on with your life.
Elements is an array of DOM objects. You should do something like this:
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove('hover');
}
Enumerate the elements collection and for each element inside the collection call the remove
method
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With