Remove all Classes from an Element using JavaScript

# 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.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <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 1</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

// ✅ Remove all classes from an element
box.className = '';

remove all classes from element

The code for this article is available on GitHub

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 will remove the class attribute from the element, effectively removing all of the element's classes.

index.js

Copied!
const box = document.getElementById('box');

// ✅ Remove all classes from element
box.removeAttribute('class');

remove all classes from element using removeattribute

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.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <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 1</div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

// 👇️ Remove all classes except bg-yellow
box.className = 'bg-yellow';

remove all classes except one

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.

index.js

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.

index.js

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.

You can use the search field on my Home Page to filter through all of my articles.

Remove all Classes from an Element using JavaScript