Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to remove a class name from an element with JavaScript?
To remove a class name from an element with JavaScript, you can use the classList.remove() method. This method provides a clean and efficient way to manipulate CSS classes dynamically.
Syntax
element.classList.remove('className');
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.newStyle {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
width: 100%;
padding: 25px;
background-color: rgb(147, 80, 255);
color: white;
font-size: 25px;
box-sizing: border-box;
text-align: center;
}
</style>
</head>
<body>
<h1>Remove className with JavaScript Example</h1>
<button class="btn">Remove Class</button>
<h2>Click the above button to remove className from below div</h2>
<div class="newStyle" id="sampleDiv">
This is a DIV element.
</div>
<script>
document.querySelector(".btn").addEventListener("click", removeClassName);
function removeClassName() {
var element = document.getElementById("sampleDiv");
element.classList.remove("newStyle");
}
</script>
</body>
</html>
Output
The above code will produce the following output:
On clicking the "Remove Class" button:
Alternative Methods
You can also remove multiple classes at once:
<div id="myDiv" class="class1 class2 class3">Content</div>
<script>
var element = document.getElementById("myDiv");
// Remove multiple classes
element.classList.remove("class1", "class2");
console.log(element.className); // "class3"
</script>
Key Points
-
classList.remove()only removes the class if it exists - No error is thrown if the class doesn't exist
- You can remove multiple classes by passing them as separate arguments
- The method is supported in all modern browsers
Conclusion
The classList.remove() method is the preferred way to remove CSS classes from elements. It's clean, efficient, and handles edge cases gracefully without throwing errors.
Updated on: 2026-03-15T23:18:59+05:30
479 Views
Advertisements