How to use remove (classname) Method and removeClass () using function method in JQuery
In this article, I will explain use of remove (classname) Method and how to use removeClass () method using function in JQuery.
Introduction
removeClass() method removes one or more classes from the selected elements. If empty parameter is determine, this method will remove ALL classes from the selected elements.
JQuery CSS remove(classname) method
remove(classname) method remove the specified class from select element.
- classname Remove one or more class. remove several classes with space.
Syntax
$(selector).removeClass(classname)
|
Example
The following example shows how to remove(classname) method in jquery.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("p").removeClass("addclass");
});
});
</script>
<style type="text/css">
.addclass
{
font-size:120%;
color:pink;
}
</style>
</head>
<body>
<h2>RemoveClass() method example</h2>
<p class="addclass">First paragraph.</p>
<p class="addclass">Second paragraph.</p>
<button>Remove the "addclass" class from all p elements</button>
</body>
</html>
|
Output
JQuery CSS removeClass() using function method
removeClass() using a function to remove a class from the selected elements.
Syntax
$(selector).removeClass(function(index,oldoffset))
|
Example
The following example shows how to removeClass() using function method in jquery.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("li").removeClass(function (n) {
if (n == 0 || n == 1) { return "listitem" }
else { return "" }
});
});
});
</script>
<style type="text/css">
.listitem
{
font-size:large;
color:green;
}
</style>
</head>
<body>
<h1>RemoveClass(function) Example</h1>
<ul>
<li class="listitem">Sunday</li>
<li class="listitem">Monday</li>
<li class="listitem">Tuesday</li>
</ul>
<button>Click for remove class "listitem" from the list elements with index 0 and 1</button>
</body>
</html>
|
Output
Further Readings
You may also want to read these related articles here
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here