Add and Remove Multiple CSS Classes in JavaScript: Complete Guide

A little story before the tutorial

March 2021 was the month I wrote this blogpost while teaching a friend some web development. I remember we had to manipulate some classes on some DOM nodes and the concept was confusing for a beginner, not to mention not knowing the full API that is available. I introduced him to classList and made some example. At the end of the day I had the idea to post a tutorial on Medium. Little I knew that that was and is still the most successful blog post I ever written on the CSS topic. So, I decided to migrate the blogpost here rather than having it under a pay wall. You have below the unedited version. The original title sounded something like this: “How to add and remove multiple CSS classes simultaneously from a DOM node” but I took the liberty to edit it for brevity.

The tutorial

The boring way 🤢

To add a CSS class all you have to do is to add some string with the class name on the node inside the value of the class attribute. Basically here:

<div class='ADD HERE YOUR CLASSES'></div>

Now, to do this, we will be using a special method called setAttribute. Let’s assume we have the DOM node saved in the myNode variable.

myNode.setAttribute('class', 'my-special-css-class');

But that looks a bit ugly and what about when we need to add another CSS class? Oh bummer!

myNode.setAttribute('class', 'my-second-css-class');

Adding a second CSS class in this fashion will replace the previous class which is not exactly what we are looking for. Of course, you may say that we can get the CSS string first, append another class name to it and then set it back. Something like this:

const currentClass = myNode.getAttribute('class');
currentClass += 'my-second-class';
myNode.setAttribute('class', currentClass);

That would do the job but it looks a bit clumsy and there is a better, cooler and native way to handles CSS classes in JavaScript. Let me introduce you to this beautiful DOM node method called classList.

The cool way 😜

With classList we rock like a boss 😂. Let me show you.

myNode.classList.add('my-first-css-class');
myNode.classList.add('my-second-css-class');

What about when we have an array of classes to add? Let’s see:

const myClasses = ['alpha', 'bravo', 'charly', 'delta'];
myClasses.forEach(className => myNode.classList.add(className));

Now let’s remove a class. Probably you guessed already. There is an equivalent method, similar to the add one called remove. To remove a class we do like this:

myNode.classList.remove('my-css-class');

Now let’s wrap everything we learned today in a nifty blazing fast function so we can reuse it many times. Shall we? Let’s call our utility tool css and we implement the option to add and remove css classes in one go. For example let’s assume we have an object with classes that we wanna add and remove. Let’s assume true is for adding a class and false is for removing one. Something like this:

const myClasses = {
  alpha: true,
  bravo: false,
  charlie: true,
  delta: false
};

Now let’s assume we have a node with two classes, alpha and charlie and we want to remove them and add other two classes: bravo and delta. So the div will become from:

<div class='alpha charlie'>Helicopters are cool!</div>

to:

<div class='bravo delta'>Helicopters are cool!</div>

The JS code looks something like this:

const classesToBeApplied = {
  alpha: false,
  bravo: true,
  charlie: false,
  delta: true
};

function css(node, classNames) {
  // We iterate through all the keys
  // of the classNames object.
  
  Object.keys(classNames).forEach((key) => {
  
    // Let's define if we need to add
    // or remove the class.
    
    const operation = classNames[key] ? "add" : "remove";
    
    // We access either `add` or `remove` property
    // of the classList object and then we pass the
    // key of the object which in essence is the
    // className we wanna add or remove.
    
    node.classList[operation](key);
  });

  // We can return the node
  return node;
}

// Let's say our div has the id=myDiv

const myDiv = document.querySelector("#myDiv");

// We apply the classes by calling the css function
css(myDiv, classesToBeApplied);