Last updated: Mar 5, 2024
Reading time·3 min
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.
<!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>
And here is the related JavaScript code.
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.
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.
const box = document.getElementById('box'); // ✅ Remove all classes from element box.removeAttribute('class');
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.
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.
<!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.
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.
const box = document.getElementById('box'); box.setAttribute('class', 'bg-yellow');
The setAttribute() method sets the value of an attribute on the specified element.
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.
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.
You can learn more about the related topics by checking out the following tutorials: