How to Remove CSS Class JavaScript
-
Use
classList.remove()to Remove CSS Class From Element With JavaScript -
Use jQuery
removeClass()to Remove CSS Class From Element With jQuery
This tutorial teaches how to remove a CSS class from an element with JavaScript.
Use classList.remove() to Remove CSS Class From Element With JavaScript
The classList property returns the list of classes applied to an element. It helps to add, remove and toggle CSS classes attached to an element. It provides us with methods add() and remove() to add/remove classes from the classList. Using remove(), we can easily remove the CSS class from any element.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="delftstack">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="delftstack">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="delftstack">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
.delftstack {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
var div = document.getElementById('delftstack');
div.classList.remove('delftclass');
In the above code, we used the selector to get the desired element from DOM, and then we store it in a variable so that we can access its properties and modify them. Since we wanted to remove the class from the element, we use classList.remove() to remove the desired class. We can even remove multiple class names at the same time by providing multiple arguments.
It should be noted that Internet Explorer doesn’t support the classList property.
Use jQuery removeClass() to Remove CSS Class From Element With jQuery
The removeClass() function in jQuery is for the sole purpose of removing a class from an element. It can remove a single, multiple, or even all the classes that from an element. We can remove the class by calling the function on any referenced element. To remove all the classes at once, call the function removeClass() without providing any arguments.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="delftstack">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="delftstack">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="delftstack">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
.delftstack {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
$('#removeme').removeClass('admin');
Another function named toggleClass() adds/removes classes from an element such that the classes that are already present are removed, but absent classes are added. It helps to achieve the same results but should be used with caution because if a wrong class name is specified, we might add a new class.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn