Backwards compatibility for "classList.remove()"

[csdude55]

I wasn't sure whether to put this in the JavaScript board or CSS, so my apologies to the mods if I guess wrong.

I found this nifty little bit of code:

document.getElementById('whatever').classList.remove(class1, class2);
document.getElementById('whatever').classList.add(class3, class4);

This would remove class1 and class2 from #whatever, and then add class3 and class4. Nifty! I could replace about 20 lines of JS code with 2 lines.

Except that remove() is only compatible with IE10+ :-(

For now, can you guys suggest a way to make classList backwards compatible for older browsers?

[jadebox]

You can get the value of document.getElementById('whatever').className then use string functions to remove the classes to delete and add the new classes. Then set document.getElementById('whatever').className to the new string value.

Or, do a web search for "polyfill classList" or "shim classList" for ways to add the classList method for older browsers.

[Fotiman]

classList has only partial support for IE10 and IE11 (and no support for previous versions). [caniuse.com...]

Here is a less concise approach:

// get the classList as an array of strings
var classList = document.getElementById("whatever").className.split(" "),
  // removeList is the list of classes to remove
  removeList = ['class1', 'class5'],
  // addList is the list of classes to add
  addList = ['class3', 'class3'];

// filter the classList, removing the items indicated in the removeList
classList = classList.filter(function (className) {
  return removeList.indexOf(className) < 0;
});

// add the classes indicated in the addList (if they are not already in the list)
addList.forEach(function (className) {
  if (classList.indexOf(className) < 0) {
    classList.push(className);
  }
});

// assign the new classList back to the DOM element
document.getElementById("whatever").className = classList.join();

[oligalma]

You could use jQuery to do this [w3schools.com...]

[csdude55]

That's a good one, oligalma! Am I correct in understanding that if I use jQuery then I won't have to worry about backwards compatibility?

[Fotiman]

But if this is the only thing you're going to use jQuery for, it's not really worth loading that library just for that. jQuery is great for DOM interactions, though, so if you have other DOM stuff to do then it may be worth it. Note, with jQuery you would do this:

$('#whatever').removeClass('class1 class2').addClass('class3 class4');

[Fotiman]

And here is jQuery's browser support:
[jquery.com...]

[csdude55]

But if this is the only thing you're going to use jQuery for, it's not really worth loading that library just for that.

Thanks for the link! In my case, I was already loading jQuery for mobile functions, so I've been playing around with my code and using it in other areas, too. I did NOT realize that 2.x was only compliant with IE9+, though, so I might have to make some modifications.

[Fotiman]

Obviously it depends on your requirements. But I wouldn't bother with IE < 9.