jQuery .removeClass() removes one or all classes from each element in the set of matched elements
Syntax and Description
.removeClass removes one or all classes
from each element in the set of matched elements. It has
two forms
.removeClass([className])
className (optional): A class name to be removed from the class attribute of each matched element.removeClass([function])
function (optional): A function returning one or more space-separated class names to be removed
Its Return value is the jQuery object, for chaining purposes.
If a class name is included as a parameter, then only that class will be removed from the set of matched elements.
If no class names are specified in the parameter, all classes will be removed. More than one class may be removed at a time, separated by a space, from the set of matched elements.
$('p').removeClass('myClass yourClass')
$('p').removeClass('myClass noClass').addClass('yourClass');
The .removeClass() method allows us
to indicate the class to be removed by passing in a function.
//w w w . j a v a 2 s . c o m
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
Remove class
The following code selects paragraph at even position and remove their class.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w.ja v a2s .c om-->
$("p:even").removeClass("blue");
});
</script>
</head>
<style>
.blue { color:blue; }
</style>
<body>
<body>
<p class=blue>A</p>
<p class=blue>java2s.com</p>
<p class=blue>A</p>
</body>
</html>
To remove class from the first paragraph, use the following code.
$("p:first").removeClass("blue");
Add and remove class dynamically
The following code shows how to add and remove class in click event handler.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<style type="text/css">
.changeP { font-weight: bold; color:red;}
</style>
<!-- w ww .jav a 2 s . c o m-->
<script type="text/javascript">
$(document).ready(function(){
$("input.buttonA").click(function(){
$("p.fifthparagraph").addClass("changeP");
});
$("input.buttonB").click(function(){
$("p.fifthparagraph").removeClass("changeP");
});
});
</script>
</head>
<body>
<input type="button" value="Change" class="buttonA" />
<input type="button" value="Change" class="buttonB" />
<div style="background:#eee;" class="contentToChange">
<h2>Header 2</h2>
<p class="firstparagraph">java2s.com</p>
<p class="fifthparagraph">java2s.com</p>
</div>
</body>
</html>