removeClass method in jQuery with examples

Home » JQuery » jQuery Methods » removeClass method in jQuery with examples

removeClass method in jQuery with examples

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Methods

1. removeClass() method removes the specified class from the elements matching the specified selector.

2. removeClass() can remove multiple or all classes from an element.

3. When a class parameter is specified, only that class is removed. When no parameter is specified all the classes are removed.

4. Two classes can be removed by specifying both the classes separated by comma.

Example 1 :

        <html>
        <head>
        <title>removeClass</title>
        <style>
        .class1
        {
        background-color:Red;
        margin-left:400px;
        width:200px;
        height:200px;
        display:block;
        }
        .class2
        {
        background-color:Green;
        margin-left:400px;
        width:200px;
        height:200px;
        display:block;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myDiv").hover(function () {
                    $(this).removeClass("class1").addClass("class2");
                });
            });
        </script>
        </head>
        <body>
        <span id="myDiv" class="class1">
        Hover Me
        </span>
        </body>
        </html>

Demo :

In the above examples, we have a div with class1. On hovering the div, we are removing the aready assigned class i.e class1 using removeClass()and assigning another class i.e class2 using addClass() method.

Example 2 :

        <html>
        <head>
        <title>removeClass</title>
        <style>
        .class1
        {
        margin-left:400px;
        width:200px;
        height:200px;
        display:block;
        }
        .class2
        {
        background-color:Aqua;

        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myDiv").hover(function () {
                    $(this).removeClass("class1 class2");
                });
            });
        </script>
        </head>
        <body>
        <span id="myDiv" class="class1 class2">
        Hover Me
        </span>
        <br />
        <input type="button" value="Reset" onclick="location.reload()" />
        </body>
        </html>

Demo :

In the above examples, we have a div with two classes assigned i.e class1 and class2. On hovering the div we are removing both the classes using removeClass() method.

Example 3 :

        <html>
        <head>
        <title>removeClass</title>
        <style>
        .thisDiv
        {
        background-color:Red;
        width:200px;
        height:200px;
        display:block;
        }
        .Green
        {
        background-color:Green!important;
        }
        .Yellow
        {
        background-color:Yellow!important;
        }
        .Aqua 
        {
        background-color:aqua!important;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".thisDiv").hover(function () {
                    var className = $(this)[0].className;
                    $(this).removeClass(function (index, className) {
                        return className;
                    }).addClass('thisDiv');
                });
            });
        </script>
        </head>
        <body>
        <table>
        <tr>
        <td>
        <span class="thisDiv Green">
        Hover Me 1
        </span></td>
        <td>
        <span class="thisDiv Yellow">
        Hover Me 2
        </span></td>
        <td>
        <span class="thisDiv Aqua">
        Hover Me 3
        </span>
        </td>
        </tr>
        </table>
        <br />
        <input type="button" value="Reset" onclick="location.reload() />
        </body>
        </html>

Demo :

In the above examples, we have 3 divs with two classes assigned for all. On hovering div we remove both classes for that particular div and reassign 'thisDiv' class.