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
Clear element.classList in JavaScript?
The task we are going to perform in this article is clear element classList in JavaScript. The classList property provides methods to add, remove, toggle, and check CSS classes on HTML elements.
All element objects (i.e., objects that represent elements) in a Document derive from the most general base class called Element. It contains functions and characteristics that apply to all types of elements.
What is classList in JavaScript
JavaScript classList is a DOM property that enables manipulation of an element's CSS classes. The read-only classList property returns a DOMTokenList containing the CSS class names of an element.
Syntax
element.classList
Methods to Clear Element classList
There are several ways to clear or remove classes from an element's classList in JavaScript.
Method 1: Using remove() Method
The classList.remove() method removes specific CSS classes from an element. You can remove one or multiple classes at once.
Syntax
element.classList.remove("className1", "className2", ...)
Example
In the following example, we remove a specific class from an element using classList.remove():
<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: #CCCCFF;
color: white;
font-size: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<p>Click to remove the CSS class from the element</p>
<button onclick="removeStyle()">Remove Class</button>
<div id="myElement" class="mystyle">
Welcome to TutorialsPoint!
</div>
<script>
function removeStyle() {
var element = document.getElementById("myElement");
element.classList.remove("mystyle");
console.log("Class removed successfully");
}
</script>
</body>
</html>
When you click the button, the "mystyle" class is removed and the element loses its styling.
Method 2: Using removeAttribute() Method
The removeAttribute() method completely removes the class attribute from an element, clearing all classes at once.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bg {
background-color: #9FE2BF;
padding: 20px;
}
.text {
color: white;
font-size: 18px;
}
</style>
</head>
<body>
<div id="box" class="text bg">Multiple Classes Applied</div>
<button onclick="clearAllClasses()">Clear All Classes</button>
<script>
function clearAllClasses() {
const box = document.getElementById('box');
box.removeAttribute('class');
console.log("All classes removed");
}
</script>
</body>
</html>
This method removes all classes from the element at once, clearing the entire classList.
Method 3: Setting className to Empty String
You can also clear all classes by setting the className property to an empty string:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
padding: 15px;
}
.bold {
font-weight: bold;
}
</style>
</head>
<body>
<p id="textElement" class="highlight bold">JavaScript classList Tutorial</p>
<button onclick="clearClasses()">Clear Classes</button>
<script>
function clearClasses() {
const element = document.getElementById("textElement");
element.className = "";
console.log("Classes cleared using className property");
}
</script>
</body>
</html>
Comparison of Methods
| Method | Purpose | Usage |
|---|---|---|
classList.remove() |
Remove specific classes | When you want to remove particular classes |
removeAttribute('class') |
Remove all classes | When you want to clear entire classList |
className = "" |
Clear all classes | Alternative way to clear all classes |
Conclusion
Use classList.remove() for removing specific classes, and removeAttribute('class') or className = "" for clearing all classes. The classList property provides a clean and efficient way to manipulate CSS classes in JavaScript.
1K+ Views
