2 Ways JavaScript Remove Class From The Elements

In this article, we will discuss how javascript remove class in 2 different ways. We will also look at different approaches for this with various real life examples.

First of all, why do we need to remove the class from the elements?

Imagine a simple game of jumping a ball. When you click on the ball, it will stop jumping. So in this situation, you simply need to remove the class jumping from the ball.

There are many other situations where you need to remove the class from the elements. For example, remove the class active from the element.

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. Remove class using classList.remove() method

The classList property is an object that contains the list of classes of the element.

The classList property has a remove() method that can be used to remove a class from the element.

The syntax of the classList.remove() method is:

element.classList.remove('class-name');

The class-name is the name of the class that you want to remove from the element.

The classList.remove() method will remove the class from the element and it 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');

2. Remove class using className property

The className property is a string that contains the list of classes of the element.

This is a read and write property. This means it can be used to read and the list of classes of the element.

You can assign a new class list to the className property of an element. It overwrites the existing class list.

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

Case 1: Only one class is there attached to the element.

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 there attached to the element.

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

For this, you can use the replace string method and 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
// let the class to remove be 'class1'
element.className = element.className.replace('class1', '');

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

JavaScript remove class if exists

We have seen above classList.remove() method return true if the class is removed successfully and false if the class is not removed. We can use these return values to take some action if the class is removed.

But here we want to remove the class if it exists. So we must first check if the class exists before removing it.

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.

The syntax of the classList.contains() method is:

element.classList.contains('class-name');

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');
}

Remove class from all elements javascript

To remove the class from all elements you can select all elements and use the classList.remove() method on all of them using a loop.

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

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

onclick add class and remove class javascript

There are 2 ways to add and remove class using onclick event using the same button.

1. The first way is to check class. If the class exists then remove it and if the class does not exist then add it.
2. The second way is to use classList.toggle() method. It adds the class if it does not exist and removes the class if it exists.

Let's see an example of the first way.

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

  // checking if the class exists
  if(element.classList.contains('active')) {
    // remove the class
    element.classList.remove('active');
  }
  else {
    // add the class
    element.classList.add('active');
  }
}

Let's see an example of the second way.

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

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

Conclusions

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

Now we can also toggle classes in 2 different ways. The first way is to check class. If the class exists then remove it and if the class does not exist then add it and the second way is to use classList.toggle() method.

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.