How to Add and Remove multiple classes in jQuery?

jQuery Web Development Front End Technology

We can use the jQuery .addClass() method to add multiple classes to an element. We simply need to pass a string of class names separated by a space as the argument. To remove multiple classes, we use the .removeClass() method and pass in the same string of class names. Both of these methods can be chained together to add and remove multiple classes at once.

But before proceeding with that let us have a look at what jQuery offers and how it makes web programming easier over plain JavaScript.

What is jQuery

jQuery is a JavaScript library that simplifies the process of manipulating and traversing HTML and CSS.
It allows developers to easily select, manipulate and change the content of a webpage using a simple syntax.
jQuery also provides a wide range of built-in methods and events to handle common tasks such as form validation, animation and AJAX calls.
It is compatible with all modern browsers and is widely used in web development.
jQuery is open-source and has a huge community support, making it easy to find solutions and tutorials for any problem encountered.

Approach

Now let us explore the approach for adding and removing multiple classes −

To add multiple classes in jQuery, use the "addClass" method and pass in a string of class names separated by spaces −

$(selector).addClass('class1 class2 class3');

To remove multiple classes in jQuery, use the "removeClass" method and pass in a string of class names separated by spaces −

$(selector).removeClass('class1 class2 class3');

Alternatively, you can also use the "toggleClass" method to add or remove multiple classes at once −

$(selector).toggleClass('class1 class2 class3');

This will add the classes if they do not exist, and remove them if they do exist on the selected element.

Note: In all the above methods, the 'selector' should be the jQuery selector for the element(s) you want to add/remove classes from.

Example

Here is a complete working example of using the toggleClass method to add or remove multiple classes in jQuery −

<!DOCTYPE html>
<html>
<head>
   <title>Toggle Class</title>
   <style>
      .red {
         color: red;
      }
      .bold {
         font-weight: bold;
      }
   </style>
</head>
<body>
   <div id="myDiv">Hello World</div>
      <button id="toggleBtn">Toggle Classes</button>
   <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
   <script>
      $(document).ready(function() {
         $('#toggleBtn').click(function() {
            $('#myDiv').toggleClass('red bold');
         });
      });
   </script>
</body>
</html>

Now, clicking the button will toggle the "red" and "bold" classes on the "myDiv" element, resulting in the text changing color and font-weight on each click.

You can also use addClass and removeClass methods in the same way. In that case you need to call both the methods separately to add/remove classes.