Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

83 lines (78 sloc) 3.823 kb
<?xml version="1.0"?>
<entry type="method" name="removeClass" return="jQuery">
<title>.removeClass()</title>
<signature>
<added>1.0</added>
<argument name="className" optional="true" type="String">
<desc>One or more space-separated classes to be removed from the class attribute of each matched element.</desc>
</argument>
</signature>
<signature>
<added>1.4</added>
<argument name="function(index, class)" type="Function">
<desc>A function returning one or more space-separated class names to be removed. Receives the index position of the element in the set and the old class value as arguments.</desc>
</argument>
</signature>
<desc>Remove a single class, multiple classes, or all classes from each element in the set of matched elements.</desc>
<longdesc>
<p>If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed.</p>
<p>More than one class may be removed at a time, separated by a space, from the set of matched elements, like so:</p>
<pre><code>$('p').removeClass('myClass yourClass')</code></pre>
<p>This method is often used with <code>.addClass()</code> to switch elements' classes from one to another, like so:</p>
<pre><code>$('p').removeClass('myClass noClass').addClass('yourClass');</code></pre>
<p>Here, the <code>myClass</code> and <code>noClass</code> classes are removed from all paragraphs, while <code>yourClass</code> is added.</p>
<p>To replace all existing classes with another class, we can use <code>.attr('class', 'newClass')</code> instead.</p>
<p>As of jQuery 1.4, the <code>.removeClass()</code> method allows us to indicate the class to be removed by passing in a function.</p>
<pre><code>$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});</code></pre>
<p>This example removes the class name of the penultimate <code>&lt;li&gt;</code> from the last <code>&lt;li&gt;</code>.</p>
</longdesc>
<example>
<desc>Remove the class 'blue' from the matched elements.</desc>
<code><![CDATA[$("p:even").removeClass("blue");]]></code>
<css><![CDATA[
p { margin: 4px; font-size:16px; font-weight:bolder; }
.blue { color:blue; }
.under { text-decoration:underline; }
.highlight { background:yellow; }
]]></css>
<html><![CDATA[<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>]]></html>
</example>
<example>
<desc>Remove the class 'blue' and 'under' from the matched elements.</desc>
<code><![CDATA[$("p:odd").removeClass("blue under");]]></code>
<css><![CDATA[
p { margin: 4px; font-size:16px; font-weight:bolder; }
.blue { color:blue; }
.under { text-decoration:underline; }
.highlight { background:yellow; }
]]></css>
<html><![CDATA[<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>]]></html>
</example>
<example>
<desc>Remove all the classes from the matched elements.</desc>
<code><![CDATA[$("p:eq(1)").removeClass();]]></code>
<css><![CDATA[
p { margin: 4px; font-size:16px; font-weight:bolder; }
.blue { color:blue; }
.under { text-decoration:underline; }
.highlight { background:yellow; }
]]></css>
<html><![CDATA[<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>]]></html>
</example>
<category slug="attributes"/>
<category slug="manipulation/class-attribute"/>
<category slug="css"/>
<category slug="version/1.0"/>
<category slug="version/1.4"/>
</entry>
Jump to Line
Something went wrong with that request. Please try again.