Clear element.classList

Question

element.classList is of DOMTokenList type.

Is there a method to clear this list?

Answer 1

var classList = element.classList;
while (classList.length > 0) {
   classList.remove(classList.item(0));
}

Answer 2

I recommend not using className as classList could result in faster DOM updates.

The remove() method of DOMTokenList (which is what classList is) can take multiple arguments - each a string of a classname to remove (reference). First you need to convert the classList to a plan array of classnames. Some people use Array.prototype.slice() to do that, but I'm not a fan and I think a for loop is faster in most browsers - but either way I have nothing against for loops and the slice often feels like a hack to me. Once you have the array you simply use apply() to pass that array as a list of arguments.

I use a utility class I wrote to accomplish this. The first method is the one you are looking for, but I'm including slightly more for your reference.

ElementTools.clearClassList = function(elem) {
    var classList = elem.classList;
    var classListAsArray = new Array(classList.length);
    for (var i = 0, len = classList.length; i < len; i++) {
        classListAsArray[i] = classList[i];
    }
    ElementTools.removeClassList(elem, classListAsArray);
}
ElementTools.removeClassList = function(elem, classArray) {
    var classList = elem.classList;
    classList.remove.apply(classList, classArray);
};
ElementTools.addClassList = function(elem, newClassArray) {
    var classList = elem.classList;
    classList.add.apply(classList, newClassArray);
};
ElementTools.setClassList = function(elem, newClassArray) {
    ElementTools.clearClassList(elem);
    ElementTools.addClassList(elem, newClassArray);
};

Please note that I have not thoroughly tested this in all browsers as the project I am working on only needs to work in a very limited set of modern browsers. But it should work back to IE10, and if you include a shim (https://github.com/eligrey/classList.js) for classList, it should work back to IE7 (and also with SVGs since Eli Grey's shim adds support for SVG in unsupported browsers too).

An alternative approach I considered was to loop backwards through the classList and call remove() on classList for each entry. (Backwards because the length changes as you remove each.) While this should also work, I figured using the multiple arguments on remove() could be faster since modern browsers may optimize for it and avoid multiple updates to the DOM each time I call remove() in a for loop. Additionally both approaches require a for loop (either to build a list or to remove each) so I saw no benefits to this alternative approach. But again, I did not do any speed tests.

If somebody tests speeds of the various approaches or has a better solution, please post.

EDIT: I found a bug in the shim which stops it from correctly adding support to IE11/10 for multiple arguments to add() and remove(). I have filed a report on github.

Answer 3

Another option is to simply remove the class attribute:

elem.removeAttribute('class')

Answer 4

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.

Answer 5

Here's another way to do it:

element.setAttribute("class", "")

Answer 6

Nowadays, classList is preferred to (remove|set)Attribute or className. Pekaaw's answer above is good, 1 similar alternative is to set the DomTokenList.value

elem.classList.value = ''