2 Ways JavaScript Remove Class

Adding and removing classes dynamically from HTML elements gives you the power to change and manipulate the elements on the fly.

In this tutorial, you will learn how to remove the class from an element using JavaScript.

Table of Contents

1. Remove class JavaScript
2. Remove class if exists
3. Remove class from all elements
4. Remove class onclick Event
5. Conclusions

1. Remove class JavaScript

There are two ways to remove the class from the elements using JavaScript:

1. Using classList.remove() method.
2. Using className property.

1.1 Remove class using classList.remove() method

The classList property is an object that contains the list of classes of the element. It has a remove() method that can be used to remove a class from the element.

The classList.remove() method will remove the class from the element and will return true if the class is removed successfully and false if the class is not removed.

The following example will remove the class active from the div element.

// selecting the div element
let div = document.getElementById('div');

// removing the class
div.classList.remove('active');

Output:

1.2 Remove class using className property

Another way to remove a class is to use the className property. You can access and modify the class list of an element using the className property.

Let's see how you can use this to remove class.

Case 1: Only one class is present in the class list.

If you have only one class in the class list then just an empty string ('') to it and the class will be removed by overwriting the class with an empty string.

// selecting the element
let element = document.getElementById('box');

// removing the class
element.className = '';

Case 2: More than one class is present in the class list.

The real trick is to remove one class from multiple classes with the className property.

For this, you can use the replace string method to replace the desired class with an empty string and assign the new class list to the className property of the element.

// selecting the element
let element = document.getElementById('box');

// removing the class
// class to remove 'class1'
element.className = element.className.replace('class1', '');

// this will remove 'class1' from List
// and set rest class to the element again

2. Remove class if exists

To remove a class only if it exists you first need to check if the class exists or not.

To check if the class exists we can use the classList.contains() method. It returns true if the class exists and false if the class does not exist.

Let's see an example of it.

// selecting the element
let ball = document.getElementById('ball');

if(ball.classList.contains('jump')) {
  // remove the class
  ball.classList.remove('jump');
}

3. Remove class from all elements

Suppose you have a collection of elements and you want to remove a class from all of them.

To do this loop through all the elements and remove the class from each element using any of the above methods.

// selecting all elements
let items = document.querySelectorAll('.items');

// Using forEach loop
items.forEach(function(item) {
  item.classList.remove('active');
});

Output:

4. Remove class onclick Event

The main purpose why we add or remove classes using JavaScript is to react to user events like onclick event.

To remove a class on click event add a click event listener to the element and remove the class inside the event listener function.

let button = document.getElementById('button');

function removeClass() {
  // selecting the element
  let element = document.getElementById('box');

  // removing the class
  element.classList.remove('active');
}

// adding the event listener
button.addEventListener('click', removeClass);

Conclusions

We have seen 2 ways in which javascript removes class. Also, we have seen how to remove the class from multiple classes and how to remove a class if it exists.

Frequently Asked Questions

1. How do you remove a class?

   To remove a class you can simply use the classList.remove() method.

2. How do you add and remove classes using JS?

   To add and remove classes using JS you can use the classList.add() and classList.remove() methods.