The below code snippet explains how to remove CSS class from an HTML control based on its name using jQuery
<div class = "myClass1 myClass2" id = "myDiv"></div>
<input type="button" id="demo" value = "Demo" />
<script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$("#demo").live("click", function () {
//Get CSS class
var classes = $("#myDiv").attr("class");
alert(classes);
//Remove CSS class
$("#myDiv").removeClass("myClass1");
//Get Updated CSS class
var classes = $("#myDiv").attr("class");
alert(classes);
});
</script>
Explanation:
In the above sample, a click event handler has been attached to the HTML button with id “demo”. When the button is clicked the name of the class is fetched using the attr("class") method of jQuery and the class name is displayed in alert box as “myClass1 myClass2”. Now the myClass1 class is removed using the removeClass("myClass1") method of jQuery. And again the class of the control is displayed in alert box. Now the alert box displays “myClass2” as myClass1 has been removed.