jQuery removeClass() Method

Quiz

The removeClass() method in jQuery is used to remove one or more class names from the selected elements, which can affect the styling and behavior defined by CSS or JavaScript based on class names.

This method accepts a parameter named âclassnameâ specifies the class to be removed from the selected elements.

Note: If no parameter is provided, this method will remove all class names from the selected elements.

Syntax

Following is the syntax of the removeClass() method in jQuery −

$(selector).removeClass(classname,function(index,currentClass))

Parameters

This method accepts the following parameters −

classname: Specifies the class(es) to be removed from the selected element(s). To remove multiple class, we need to separate the class names with space.
function(index,currentclass): This function is executed for each selected element. It takes two parameters:
index: Represents the index of the currently selected element within the set of matched elements.
currentClass: Represents the class attribute value of the currently selected element.

Example 1

In the following example, we are demonstrating the basic usage of the removeClass() method in jQuery −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $('button').click(function(){
        $('div').removeClass('one');
    });
});
</script>
<style>
    .one{
        background-color: yellow;
        border: 2px solid black;
        width: 220px;
    }
    .two{
        background-color: lightcoral;
        border: 2px solid black;
        width: 220px;
    }
</style>
</head>
<body>
<div class="one">div element 1.</div>
<div class="two">div element 2.</div>
<button>Remove "one" class</button>
</body>
</html>

When we click the button, the âoneâ class will be removed from the selected <div> element.

Example 2

In this example, we are using the optional function parameter to remove a class from the selected elements −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#removeBtn").click(function(){
        $(".items li").removeClass(function(index, className) {
            if (index % 2 === 0) {
                return "even";
            }
        });
    });
});
</script>
<style>
.even {
    background-color: lightgray;
}
</style>
</head>
<body>
<ul class="items">
    <li class="even">Item 1</li>
    <li class="odd">Item 2</li>
    <li class="even">Item 3</li>
    <li class="odd">Item 4</li>
    <li class="even">Item 5</li>
</ul>
<button id="removeBtn">Remove Even Class</button>
</body>
</html>

When we click the button, it iterates through each list item, removes the âevenâ class if the itemâs index is even, and removes the background color for those items.

Example 3

Here, we are removing multiple class names from the selected elements −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#removeBtn").click(function(){
        $("div, h2, p").removeClass("one two three");
    });
});
</script>
<style>
.one{
    background-color: yellow;
    border: 2px solid black;
    width: 150px;
}
.two{
    border: 2px solid black;
    width: 150px;
}
.three{
    border: 2px solid black;
    width: 150px; 
}
</style>
</head>
<body>
<div class="one" >div element.</div>
<h2 class="two">heading element.</h2>
<p class="three">paragraph element.</p>
<button id="removeBtn">Remove</button>
</body>
</html>

After executing and clicking the button, the âoneâ, âtwoâ, and âthreeâ classes will be removed from the selected elements.

jquery_ref_html.htm

Print Page