Remove Class in Javascript

Introduction

There is a to-do list built using HTML, CSS, and Javascript. The user enters the task that they need to perform. By default, all these tasks are active and need to be done. Now once the user has finished a task, they can remove it/cross it from the to-do list.

The above-given example demonstrates the removal of class javascript. Initially, the items on the to-do list have a class name class=active. This lets the user know that the task is still active and needs to be done. once the user has performed the task, they need to remove class=active from the to-do list item. This will let the user know that they have completed the task. To remove the class from HTML, you can use Javascript or Jquery.

Using Javascript or Jquery, you can easily remove a class. Let's see and understand how we can remove class in javascript.

How to Remove Class in Javascript ?

Both Javascript and JQuery provide a wide range of in-built methods that one can use to remove class. Let's see each of these methods and understand how they work.

Remove Method

The remove method is a simple function that you can use to remove a class in javascript. All you need to do is specify the element from which you want to remove the class. Once you have specified the element, you can call the remove function from the classList function of the selected element. classList method specifies all the classes associated with the specific element. From the class list, you can select the class you want to remove and pass it on to the remove method. Remove method can take multiple inputs as well. You can provide all the classes you wish to remove from the element and it will do it. This makes it easier to deal with when you are building complex web apps that require dealing with multiple classes for the same element.

Syntax :

toggleClass Method

toggleClass method is similar to the remove method in javascript. The main difference is that instead of removing the class completely, it somewhat removes it temporarily. toggleClass method is used when you want to toggle a class. What does this mean?
toggleClass method helps you to add or remove the same class to the element. For example, let's say you want to remove a class when a button is clicked. However, when the button is clicked again, you want to add the same class that was removed. In this case, you can use the toggleClass method. toggleClass method is only available for use in JQuery.

Syntax :

Similar to the remove method, the toggleClass method is applied to an element from which you want to toggle class.

removeClass Method

If you want to just remove the class in jQuery and not toggle it, then you can use the removeClass method. removeClass method permanently removes the JQuery. The Syntax of removeClass is similar to the toggleClass method, however, the working is completely different. A class once removed by the removeClass method cannot be re-added without using the addClass method in JQuery. It is permanently removed from the element.

Syntax :

Now that we know how to remove class in javascript and JQuery, let's get our hands on with some examples of how to remove class in javascript.

Example to Remove Class in Javascript

In this example, we would see examples of how to remove class in javascript and JQuery. We will learn through hands-on experience of all three remove class methods in javascript and JQuery.

In real life when building any feature that requires the removal of class, we usually use certain kinds of event listeners. When the user performs a certain action such as pressing a key or clicking a button, then we initiate the method that removes the class from the element. We are going to use the same thing here. Let's get started with some examples of how to remove class in javascript.

Example of using the Remove Method

In this example, we will be using the remove method of Javascript to remove a class from an HTML Element.

Code :

Output :

Explanation :

In the above example, we removed the class main from the div element. We selected the element using the unique element id mainDiv. After that, we added the event listener onclick that activates the removeClass function when the user clicks the button. The function removes the class main from the element easily.

Example of using toggleClass Method

In this example, we will be using the toggleClass method of JQuery to remove a class from an HTML Element.

Code :

Output :

Explanation :

In the above example, we toggle the class main from the div element. We selected the element using the unique element id mainDiv. After that, we added the event listener onclick that activates the toggleClass function when the user clicks the button. The function toggles the class main from the element easily. The user can remove and re-add this class to the mainDiv. Unlike the remove class method, this one does not permanently remove the class from the mainDiv. Clicking the button once removes the class while clicking it the second time adds the class back.