Sometimes, we want to remove all classes from element with JavaScript.

In this article, we’ll look at how to remove all classes from element with JavaScript.

How to remove all classes from element with JavaScript?

To remove all classes from element with JavaScript, we can call removeAttribute on the element.

For instance, we write:

<button class='my-class second'>
  hello
</button>

to add a button with some classes.

Then we write:

.my-class {
  background-color: red;
}

.second {
  box-shadow: 0px 0px 10px 10px;
}

to add some classes with styles.

Then we remove all the classes when the button is clicked by writing:

document.querySelector('button').onclick = (e) => {
  e.target.removeAttribute("class");
}

We select the button with querySelector.

Then we set its onclick property to a function that calls removeAttribute on the button being clicked to remove the class attribute.

Conclusion

To remove all classes from element with JavaScript, we can call removeAttribute on the element.