Remove classes with javascript

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.

Click the button below to stop the ball from jumping.

When you click the button javascript will remove the class jump from the ball and the ball will stop jumping.

Remove class JavaScript

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

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.

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.

Источник

Remove classes with javascript

Last updated: Jan 11, 2023
Reading time · 3 min

# Remove all Classes from an Element using JavaScript

To remove all classes from an element, set the element’s className property to an empty string, e.g. box.className = » .

Setting the element’s className property to an empty string empties the element’s class list.

Here is the HTML for the example.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> style> .bg-salmon  background-color: salmon; > .text-white  color: white; > style> head> body> div id="box" class="text-white bg-salmon">Box 1div> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const box = document.getElementById('box'); // ✅ Remove all classes from an element box.className = ''; 

The className property can be used to read, set or update the value of the element’s class attribute.

When the property is set to an empty string, the attribute remains on the element but is empty — all the element’s classes get removed.

# Remove all classes from an element using removeAttribute

An alternative approach is to use the Element.removeAttribute() method.

The method removes will remove the class attribute from the element, effectively removing all of the element’s classes.

Copied! 
const box = document.getElementById('box'); // ✅ Remove all classes from element box.removeAttribute('class'); 

The difference between the two approaches is that when we set the className property of the element to an empty string, the class attribute remains on the element without a value.

The removeAttribute method simply removes the class attribute from the element.

If the element doesn’t have a class attribute set, the removeAttribute method will not throw an error, it will simply return an undefined value.

# Remove all Classes except One using JavaScript

To remove all classes from an element except one, use the className property on the element to set its class string to the class you want to keep.

The className property can be used to read, set or update the class of the DOM element.

Here is the HTML for the example.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> style> .bg-yellow  background-color: yellow; > .text-red  color: red; > .big  padding: 20px; > style> head> body> div id="box" class="bg-yellow text-red big">Box 1div> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const box = document.getElementById('box'); // 👇️ Remove all classes except bg-yellow box.className = 'bg-yellow'; 

We used the document.getElementById() method to select the element by its id .

We then set the element’s className property to the only class we want to keep.

An alternative approach that achieves the same result is to use the setAttribute() method.

Copied! 
const box = document.getElementById('box'); box.setAttribute('class', 'bg-yellow'); 

The setAttribute method sets the value of an attribute on the specified element.

If the attribute already exists on the element, its value is updated, otherwise, a new attribute is added with the specified name and value.

When we use the setAttribute method on an element that already has a class attribute, we are effectively replacing the value of the element’s class.

An alternative and more manual approach to remove all classes from an element except one is to use the classList.remove() method.

Copied! 
const box = document.getElementById('box'); box.classList.remove('text-red', 'big'); 

The classList.remove() method takes one or more class names as parameters and removes the classes from the element.

If the class does not exist on the element, the remove() method does not throw an error, it just ignores the class.

Which approach you pick is a matter of personal preference.

I’d go with the approach that sets the className property on the element to the class I want to keep because it’s the most direct and easiest to read of the 3.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник