How to Add/Remove Multiple Classes to an Element in JavaScript

Introduction

In this Byte you'll learn a bit about the importance of CSS classes and how to manipulate them using both vanilla JavaScript and jQuery. By the end, you'll be able to dynamically alter the appearance and behavior of your web elements with ease. Let's get started!

CSS Classes

As you probably know, CSS classes play an important role in web development. They allow you to define a style once and then apply it to multiple elements across your website, ensuring consistency and reducing repetition. For instance, you might have a .highlight class that changes the background color of an element to yellow. To apply this style, you simply add the class to the desired elements in your HTML.

<div class="highlight">This is a highlighted text.</div>

However, what if you want to add or remove classes dynamically, based on user interaction or some other condition? That's where we'll be using JavaScript.

Why Manipulate CSS Classes with JavaScript

While CSS is great for static styles, JavaScript allows us to make our web pages dynamic and interactive. By manipulating CSS classes with JavaScript, you can change the look and behavior of elements on-the-fly. This is something that isn't possible without the use of JS.

For example, you might want to add a .active class to a navigation link when it's clicked, or remove a .hidden class from a modal when a button is pressed. This dynamic manipulation of classes can greatly enhance the user experience of a website.

In the next few sections we'll see how to actually do this in JS using a few different methods.

Vanilla JavaScript

In vanilla JavaScript, you can add or remove classes using the classList property of an element. This property returns a live DOMTokenList collection of the class attributes of the element.

Adding Multiple Classes

To add multiple classes, you can use the add method of classList. This method can accept multiple arguments, each one being a class you want to add. If a specified class already exists on the element, it will not be added again.

Here's an example:

let element = document.querySelector("#myElement");
element.classList.add("class1", "class2", "class3");

After running this code, the element with the id "myElement" will have the classes class1, class2, and class3 added to it.

Removing Multiple Classes

Similarly, to remove multiple classes, you can use the remove method of classList. This method also accepts multiple arguments, each one a class to be removed. If a specified class does not exist on the element, it will be ignored. This is a nice feature as it provides some built-in "safety" and doesn't throw an error.

Here's how you can do it:

let element = document.querySelector("#myElement");
element.classList.remove("class1", "class2", "class3");

After running this code, the classes class1, class2, and class3 will be removed from the element with the id "myElement".

In the next sections, we'll cover how to achieve the same results using jQuery.

jQuery

jQuery, a popular JavaScript library, provides its own methods for adding and removing classes. If you're already using jQuery in your project, these methods can provide a more concise syntax for class manipulation.

Adding Multiple Classes

To add multiple classes with jQuery, you use the addClass() method. Here's how it looks:

$("#myElement").addClass("class1 class2 class3");

This code adds the classes class1, class2, and class3 to the element with the ID myElement. Unlike the classList.add() method in vanilla JavaScript, the addClass() method in jQuery takes a single string argument, with individual class names separated by spaces.

Removing Multiple Classes

Again, for jQuery, the process is quite similar as in plain JS. The removeClass() method is used, and the class names are passed as a space-separated string:

// Select the element
let element = $("#myElement");

// Remove multiple classes
element.removeClass("class1 class2 class3");

In this case, we're using jQuery to select the element with the id "myElement" and remove "class1", "class2", and "class3" from it. Again, if the classes don't exist, removeClass() will just carry on its way and ignore the missing class.

Use Cases and Applications

Manipulating CSS classes with JavaScript has a wide range of applications, some of which we touched on earlier. It's a common technique for adding dynamic behavior to websites. For example, you might have a navigation menu that changes style when the user scrolls down. This can be done by adding or removing classes that control the appearance of the menu.

Another common use case is form validation. You may have a form where the user has to input a valid email address. If the user inputs an invalid email, you could add a class to the input field that changes its border to red. If the user corrects their mistake, you could remove the class to revert the border color.

In interactive web applications, you might have elements that change appearance based on user actions or data changes. Like a button could have different styles depending on whether it's enabled or disabled. By adding or removing classes, you can control these styles directly from your JavaScript code.

Conclusion

In this Byte, we've learned how to add and remove multiple CSS classes to an element using both vanilla JavaScript and jQuery. We've seen that this can be done using the classList property in JavaScript and the addClass() and removeClass() methods in jQuery. We've also explained some practical applications of these techniques, like dynamic styling and form validation.