{"name":"removeClass","type":"method","title":".removeClass()","deprecated":null,"removed":null,"desc":"Remove a single class, multiple classes, or all classes from each element in the set of matched elements.","categories":["attributes","manipulation/class-attribute","css","version/1.0","version/1.4"],"entries":[{"return":"jQuery","signatures":[{"added":"1.0","argument":{"desc":"One or more space-separated classes to be removed from the class attribute of each matched element.","name":"className","optional":"true","type":"String"}},{"added":"1.4","argument":{"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.","name":"function(index, class)","type":"Function"}}],"examples":[{"desc":"Remove the class 'blue' from the matched elements.","code":"\n$( \"p:even\" ).removeClass( \"blue\" );\n","css":"\n  p {\n    margin: 4px;\n    font-size: 16px;\n    font-weight: bolder;\n  }\n  .blue {\n    color: blue;\n  }\n  .under {\n    text-decoration: underline;\n  }\n  .highlight {\n    background: yellow;\n  }\n","html":"\n<p class=\"blue under\">Hello</p>\n<p class=\"blue under highlight\">and</p>\n<p class=\"blue under\">then</p>\n<p class=\"blue under\">Goodbye</p>\n"},{"desc":"Remove the class 'blue' and 'under' from the matched elements.","code":"\n$( \"p:odd\" ).removeClass( \"blue under\" );\n","css":"\n  p {\n    margin: 4px;\n    font-size: 16px;\n    font-weight: bolder;\n  }\n  .blue {\n    color: blue;\n  }\n  .under {\n    text-decoration: underline;\n  }\n  .highlight {\n    background: yellow;\n  }\n","html":"\n<p class=\"blue under\">Hello</p>\n<p class=\"blue under highlight\">and</p>\n<p class=\"blue under\">then</p>\n<p class=\"blue under\">Goodbye</p>\n"},{"desc":"Remove all the classes from the matched elements.","code":"\n$( \"p:eq(1)\" ).removeClass();\n","css":"\n  p {\n    margin: 4px;\n    font-size: 16px;\n    font-weight: bolder;\n  }\n  .blue {\n    color: blue;\n  }\n  .under {\n    text-decoration: underline;\n  }\n  .highlight {\n    background: yellow;\n  }\n","html":"\n<p class=\"blue under\">Hello</p>\n<p class=\"blue under highlight\">and</p>\n<p class=\"blue under\">then</p>\n<p class=\"blue under\">Goodbye</p>\n"}],"longdesc":"\n    <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>\n    <p>More than one class may be removed at a time, separated by a space, from the set of matched elements, like so:</p>\n    <pre><code>\n$( \"p\" ).removeClass( \"myClass yourClass\" )\n    </code></pre>\n    <p>This method is often used with <code>.addClass()</code> to switch elements' classes from one to another, like so:</p>\n    <pre><code>\n$( \"p\" ).removeClass( \"myClass noClass\" ).addClass( \"yourClass\" );\n    </code></pre>\n    <p>Here, the <code>myClass</code> and <code>noClass</code> classes are removed from all paragraphs, while <code>yourClass</code> is added.</p>\n    <p>To replace all existing classes with another class, we can use <code>.attr( \"class\", \"newClass\" )</code> instead.</p>\n    <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>\n    <pre><code>\n$( \"li:last\" ).removeClass(function() {\n  return $( this ).prev().attr( \"class\" );\n});\n    </code></pre>\n    <p>This example removes the class name of the penultimate <code>&lt;li&gt;</code> from the last <code>&lt;li&gt;</code>.</p>\n  "}]}