Updated April 20, 2023
Introduction to jQuery removeClass()
jQuery removeClass() is an inbuilt jQuery method that is used for the removal of one or more specified classes from each HTML element in the set of matched elements. One can remove more than one class at a time from the set of matched elements by separating them by a space. If a class name is passed as a parameter to the method, that means only that particular class will be removed. If no class name is passed as a parameter to the removeClass() method, it will remove all the classes. jQuery removeClass() can also be used in XML documents.
Syntax
$(selector).removeClass(classname,function(index,currentclass))- Where classname is an optional parameter that specifies the class to be removed. For more than one class, space should be used between the class names.
- function(index,currentclass) is also an optional parameter that specifies the function that returns one or more space-separated class names to be removed.
- index refers to the index of the current element in the matched set.
- currentclass refers to the class name of the selected elements
Examples of jQuery removeClass()
Below are the examples of jQuery removeClass():
Example #1
The following example illustrates how the jQuery removeClass() method can be used to remove a class from the selected HTML element by passing a single class as a parameter.
Code:
<!DOCTYPE html>
<head>
<title>Example for jQuery removeClass() method</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("h1").removeClass("div2");
$("p").removeClass("highlight");
});
});
</script>
<style>
.div1 {
width: 400px;
height: 200px;
padding-top: 20px;
padding-left: 5px;
text-align: center;
background-color: cadetblue;
}
.div2 {
font-weight: bold;
color:blue;
}
.highlight {
background:yellow
}
</style>
</head>
<body>
<div class="div1">
<h1 class="div2">jQuery removeClass()</h1>
<p><strong>Removes one or more classes from the HTML elements</strong></p>
<p class="highlight">If no class is specified in the method, all the classes are removed </p>
<button type="button">Click here</button>
</div>
</body>
</html>Output
- The below screenshot shows the page which gets displayed once the above code is executed.
- On clicking the “Click here” button, removeClass() method will remove the class “div2” from <h1> element and class “highlight” from <p> element as shown below in the screenshot.
Example #2
The following example illustrates the usage of the removeClass() method when multiple classes are passed as parameters to the method.
Code:
<!DOCTYPE html>
<head>
<title>Example for jQuery removeClass() method</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("h2, p").removeClass("class1 class2 class3");
});
});
</script>
<style>
.divstyle {
width: 500px;
height: 200px;
padding-top: 20px;
padding-left: 5px;
text-align: center;
background-color: cadetblue;
}
.class1 {
color:maroon;
text-transform: uppercase;
}
.class2 {
font-size: 16px;
color: blueviolet;
}
.class3 {
font-size: 18px;
color:blue;
}
</style>
</head>
<body>
<div class="divstyle">
<h2 class="class1">jQuery removeClass()</h2>
<p class="class2"><strong> Removes one or more classes from the HTML elements</strong></p>
<p class="class3">If no class is specified in the method, all the classes are removed .</p>
<button>
Click here to remove the classes
</button>
</div>
</body>
</html>Output
- The below screenshot shows the page which gets displayed once the above code is executed.
- On clicking the button, removeClass() method will remove the class “class1” from <h2> element, “class2” and “class3” from <p> elements as shown below in the screenshot.
Example #3
Here is another simple example showing the usage of the removeClass() method for the removal of multiple classes.
Code:
<!DOCTYPE html>
<head>
<title>Example for jQuery removeClass() method</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$( "p:odd" ).removeClass( "class1 class2" );
});
});
</script>
<style>
.divstyle {
width: 500px;
height: 200px;
padding-top: 20px;
padding-left: 5px;
text-align: center;
background-color: cadetblue;
}
.class1 {
font-weight: bold;
}
.class2 {
text-decoration: underline;
}
.class3{
color:maroon;
}
</style>
</head>
<body>
<div class="divstyle">
<p class="class1 class2 class3">jQuery removeClass()</p>
<p class="class1 class2 class3 ">Demo</p>
<p class="class1 class2 class3">Removes one or more classes</p>
<p class="class1 class2 class3 ">CSS manipulation method</p>
<button>
Click here to change the class.
</button>
</div>
</body>
</html>Output
- The below screenshot shows the page which gets displayed once the above code is executed.
- On clicking the button, the removeClass() method will remove the classes “class1” and “class2” from the matched set of <p> elements (all the <p> elements whose index is odd) as shown below in the screenshot.
Example #4
Following example illustrates the difference between the addClass() and removeClass() methods of jQuery.
Code:
<!DOCTYPE html>
<head>
<title>Example for jQuery removeClass() method</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").removeClass("class_rem").addClass("class_add");
});
});
</script>
<style>
.divstyle {
width: 500px;
height: 200px;
padding-top: 20px;
padding-left: 5px;
text-align: center;
background-color: cadetblue;
}
.class_rem {
color:maroon;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
}
.class_add {
font-size: 18px;
color:blue;
}
</style>
</head>
<body>
<div class="divstyle">
<p class="class_rem">jQuery removeClass()</p>
<p><strong> Removes one or more classes from the HTML elements</strong></p>
<button>
Click here to change the class.
</button>
</div>
</body>
</html>Output
- The below screenshot shows the page which gets displayed once the above code is executed.
- On clicking the button, removeClass() method will remove the class “class_rem” from the selected <p> element and addClass() will then add the class “class_add” to the selected <p> element as shown below in the screenshot.
Conclusion
In this article, we learned about the jQuery CSS manipulation method, removeClass() which is used to remove one or more classes from a set of selected HTML elements. The removeClass()method deletes the specified classes from every element which matches the set of selected elements. If there is no parameter specified with the method, all the classes will be removed from the selected elements.
Recommended Articles
This is a guide to jQuery removeClass(). Here we discuss the introduction to jQuery removeClass() along with the appropriate syntax and examples. You may also have a look at the following articles to learn more –
