The below code snippet explains how to remove all CSS classes applied to an HTML control 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 all CSS classes
$("#myDiv").removeAttr("class");
//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 using the removeAttr("class") method of jQuery we remove the class attribute of the HTML DIV. Now again the class attribute of the control is displayed using the alert box. Now the alert box displays “undefined” as classes have been removed.