jQuery removeClass() Method
You are Here:
jQuery removeClass() Method
The jQuery removeClass() method removes a single class, multiple classes, or all classes from each element in the set of matched elements.
Remove One Class
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.point{
color: red;
font-size: 22px;
}
.point1{
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<h1>jQuery removeClass() Method</h1>
<p class="point point1">Click on the button to remove class 'point' from this paragraph.</p>
<button>Click Me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").removeClass("point");
});
});
</script>
</body>
</html>
Syntax
// Remove one class
$(selector).removeClass(className);
// Remove multiple class
$(selector).removeClass(className1 className2);
Parameter Values
| Value | Type | Explanation |
|---|---|---|
| className | Optional | Specifies one or more class names to be removed |
Remove Multiple Classes
Note: Classes are space-separated.
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style>
.point{
color: red;
font-size: 22px;
}
.point1{
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<h1>jQuery removeClass() Method</h1>
<p class="point point1">Click on the button to remove classes 'point' and 'point1' from this paragraph.</p>
<button>Click Me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
// no comma separator
$("p").removeClass("point point1");
});
});
</script>
</body>
</html>
Remove All Classes
Note: To remove all classes from the matched elements, we should not pass any argument with the removeClass() method.
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style>
.point{
color: red;
font-size: 22px;
}
.point1{
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<h1>jQuery removeClass() Method</h1>
<p class="point point1">Click on the button to remove classes 'point' and 'point1' from this paragraph.</p>
<button>Click Me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
// no comma separator
$("p").removeClass();
});
});
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 99.5% of jQuery Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in jQuery.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
