How to Remove All Classes from an Element with JavaScript?

To remove all classes from an element in JavaScript, set the className property of the element to an empty string (''). This will clear all the CSS classes assigned to the element.

When you set the className property of an element to an empty string in JavaScript, it removes all the existing classes from that element.

The className property in JavaScript is used to get or set the value of the class attribute of an HTML element.

When it is used as a getter, it returns a string that contains all the classes assigned to the element. The class names are separated by spaces in the resulting string.

You can also use the className property to set the classes to an element.

To set the CSS classes using the className property, you can simply assign a string of one or more class names.

So, when you set the className property to an empty string, you actually tell the browser that all the existing classes should be replaced with an empty string. Which means that all classes will be removed.

Let’s take an example, which has a div element with two classes ‘highlight’ and ‘bold’. We want to remove these two classes from the div as soon as we click the button:

<button id="myBtn">Remove Classes</button>
<div id="myDiv" class="highlight bold">Some Text.</div>

Add the CSS:

.highlight{
   background-color: springgreen;
   padding: 20px;
   border-radius: 10px;
}
.bold{
    font-weight: bold;
}

Add the JavaScript:

// Get reference to the button
const btn = document.getElementById('myBtn');

// Fires on button click
btn.addEventListener('click', function(){
    
    // Get the target element
    const element = document.getElementById('myDiv');
    
    // Remove all the existing classes
    element.className = '';
    
});

Output:

Note: It’s important to note that setting the className property to an empty string('') will not affect any inline styles that may have been applied to the element.

2. Remove All Classes from an Element with classList.remove() Method

An alternative solution could be to use the classList.remove() method to remove all the classes from an element.

The classList.remove() method takes one or more classes to be removed as arguments and removes them from the element.

element.classList.remove(class1, class2, ..., classN);

However, in this approach, you can not directly remove all the classes from the element.

Instead, you have to run a for/while loop over the classList and remove each class one by one until the classList is empty.

// Get reference to the button
const btn = document.getElementById('myBtn');

// Fires on button click
btn.addEventListener('click', function () {

    // Get the target element
    const element = document.getElementById('myDiv');

    // Remove all the existing classes
    while (element.classList.length > 0) {
        //Remove each class one by one
        element.classList.remove(element.classList[0]);
    }

});

3. Remove All Classes from an Element with removeAttribute()

You can also use the removeAttribute() method to remove all classes from an element with JavaScript.

The removeAttribute() method takes the attribute to be removed as an argument and completely removes it from the element.

element.removeAttribute(attributeName);

To remove all the classes from an element we can simply remove the 'class' attribute from it. This will remove all the existing classes from the element.

// Get reference to the button
const btn = document.getElementById('myBtn');

// Fires on button click
btn.addEventListener('click', function () {

    // Get the target element
    const element = document.getElementById('myDiv');

    // Remove the class attribute from the element
    element.removeAttribute('class');

});

Note: If the class attribute doesn’t exist on the element, the removeAttribute() method will not throw any errors.

Thanks for reading.