How TO - Remove a Class
Learn how to remove a class name from an element with JavaScript.
Click the button to remove a class from me!
Remove Class
Step 1) Add HTML:
In this example, we will use a button to remove the "mystyle" class from the <div> element with id="myDIV":
Example
<button onclick="myFunction()">Try it</button>
<div id="myDIV"
class="mystyle">
This is a DIV element.
</div>
Step 2) Add CSS:
Style the specified class name:
Example
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
Step 3) Add JavaScript:
Get the <div> element with id="myDIV" and remove the "mystyle" class from it:
Example
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.remove("mystyle");
}
Try it Yourself »
Cross-browser solution
Note: The classList property is not supported in Internet Explorer 9. The following code will work in all browsers:
Example
function myFunction() {
var element =
document.getElementById("myDIV");
element.className =
element.className.replace(/\bmystyle\b/g, "");
}
Try it Yourself »
Tip: Also see How To Toggle A Class.
Tip: Also see How To Add A Class.
Tip: Learn more about the classList property in our JavaScript Reference.
Tip: Learn more about the className property in our JavaScript Reference.
