jQuery Tutorial Tutorials - jQuery .removeClass() method

The .removeClass() method in jQuery is used to remove the class(es) from the matched elements.

jQuery .removeClass() method Syntax

$.removeClass()
$.removeClass('className')
$.removeClass('className className')
$.removeClass(function)

.removeClass()

Remove all the class name from the matched elements.

example

HTML

<p>JavaScript Tutorial</p>
<p class="selected">JavaScript Examples</p>
<p class="box selected">Learn JavaScript on Lautturi.com</p>

jQuery

$("p").removeClass();

Result

<p class>JavaScript Tutorial</p>
<p class>JavaScript Examples</p>
<p class>Learn JavaScript on Lautturi.com</p>

Try now

.removeClass('className')

example

Remove the class "selected" from the matched elements.

$("p").removeClass("selected");

Try now

.removeClass('className className')

example

Remove the class 'blue' and 'under' from the matched elements.
jQuery

$( "p" ).removeClass( "blue under" );

HTML

 <p class="blue under">JavaScript Tutorial</p>
<p class="blue">JavaScript Examples</p>
<p class="under">Learn JavaScript on Lautturi.com</p>
<p class="blue under highlight">Learn JavaScript on Lautturi.com</p>

Result

<p class>JavaScript Tutorial</p>
<p class>JavaScript Examples</p>
<p class>Learn JavaScript on Lautturi.com</p>
<p class="highlight">Learn JavaScript on Lautturi.com</p>

Try now

.removeClass(function)

example

Remove the class "item-*" from matched elements.

HTML

<ul>
    <li class="item-0">Hello</li>
    <li class="item-1">Hello</li>
    <li class="item-2">Hello</li>
</ul>

jQuery

$('ul li').removeClass(function(index) {
    return "item-" + index;
});

Result

<ul>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
</ul>

Try now