Clear element.classList

Question

element.classList is of DOMTokenList type.

Is there a method to clear this list?

Answer 1

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.