Clear element.classList
element.classList
is of DOMTokenList
type.
Is there a method to clear this list?
I'm not aware of a "method" in the sense of a "function" associated with classList
. It has .add()
and .remove()
methods to add or remove individual classes, but you can clear the list in the sense of removing all classes from the element like this:
element.className = "";
With ES6 and the spread operator, this is a breeze.
element.classList.remove(...element.classList);
This will spread the list items as arguments to the remove method.
Since the classList.remove
method can take many arguments, they all are removed and the classList
is cleared.
Even though it is readable it is not very efficient. @Fredrik Macrobond's answer is faster.
View different solutions and their test results at jsperf.
var classList = element.classList;
while (classList.length > 0) {
classList.remove(classList.item(0));
}
Here's another way to do it:
element.setAttribute("class", "")