jQuery .removeClass(): Remove Specific or All Classes
.removeClass() removes specified class names from matched elements. With no argument, it removes every class, so name the classes explicitly when clearing only a particular state.
Syntax and behavior
$(".item").removeClass("active");
$(".item").removeClass("marked active");
$(".item").removeClass();
Pass multiple names in a space-separated string or an array. Other classes remain, and removing a class that is absent does not cause an error. After removal, the remaining classes and other style rules determine the appearance; the element does not necessarily return to the browser’s default styling. The returned value is the original jQuery object.
The official jQuery .removeClass() documentation describes additional call signatures and argument types.
Complete runnable example
Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery removeClass example</title>
<style>
body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
.marked { background: #fff0b3; border: 2px solid #835b00; }
.active { color: #a00000; font-weight: bold; }
button, input, select { font: inherit; }
#output { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<p id="a" class="item base marked active">Highlighted item</p>
<p id="b" class="item base marked active">Second item</p>
<p id="output" aria-live="polite"></p>
<script>
$(function () {
$("#a").removeClass("active");
$("#b").removeClass("marked active");
$("#output").text("a: " + $("#a").attr("class") + " / b: " + $("#b").attr("class"));
});
</script>
</body>
</html>
Expected result
Paragraph a loses its red-text class but retains the background and border. Paragraph b loses both highlight classes. The output is a: item base marked / b: item base.
Important details and troubleshooting
- Calling .removeClass() without an argument can also remove classes used for layout or identifying event targets. Remove only the state names you intend to clear.
- The argument is a class name, not a selector. Do not include a leading dot.
- Removing classes does not clear inline style attributes. Clear properties set with .css() separately, or manage the state through CSS classes.
Compare the behavior with .addClass() and CSS classes, .toggleClass() and explicit state.
jQuery .prepend(): Insert Content as the First Child
Add content at the beginning of an element and understand how existing nodes and multiple destinations affect the result.
jQuery .addBack(): Include the Previous Traversal Selection
Include the previous traversal collection and understand which elements the optional selector filters.
jQuery .removeClass(): Remove Specific or All Classes
Remove selected class names or clear all classes, while distinguishing class removal from clearing inline styles.
jQuery .addClass(): Add One or More CSS Classes
Add one or more classes while preserving existing names, generate classes with a callback, and check why styling may not change.
jQuery .add(): Combine Element Selections
Combine selections without changing the original collection, and distinguish selecting elements from inserting them into the document.
jQuery :button Selector: Which Elements Does It Match?
Check how :button treats button elements, ordinary button inputs, and submit or reset inputs, with a working selection example.
jQuery :contains(): Match Elements by Text Content
Explore case-sensitive substring matching, descendant text, and a safer way to handle dynamic search strings without constructing selectors.
jQuery .append(): Insert Content as the Last Child
Add content at the end of an element, compare insertion with moving or cloning nodes, and handle user input as plain text.