jQuery Remove CSS Class from all Descendants at once

Question

Can I remove a specific CSS class from all XYZ elements within an element at once?

Example: Remove CSS class "active" from all <a> anchors within my search <div>.

If so, how?

Answer 1

$("#mydiv a").removeClass("active");

Answer 2

Yeah. You do it like this:

$("div a .className").removeClass("className")

Or, supposing you only want to do it on a certain div, as long as the div has an id attribute set, you could do this:

$("#divIDValue a .className").removeClass("className")

With jQuery selectors, # with some text after it refers to the object (div, span, anchor, whatever) with the id attribute set to whatever that text is. A period refers to all objects with that the class name matching the text coming after the period. As demonstrated above, you can nest the selector text. So in the examples above, here's what happens:

Example #1

1. Find all divs
2. Finds all anchors within all divs
3. Finds all of the anchors from #2 that have class .className

Example #2

1. Find the div with the id attribute set to "divIDValue"
2. Find all anchor tags within that div
3. Find all anchor tags within that list of anchor tags that match the class name className

Keep in mind that for all of the objects in your page, only one object can have any particular id value. So, you can have two objects with the id set to 'divIDValue' - although your page will still probably look OK, jQuery will only find the first item with id. Classes, on the other hand, can be used for multiple items (as you probably already know).

Answer 3

If search is a class:

$("div.search a").removeClass("active");

If search is an ID:

$("#search a").removeClass("active");