Remove all class from an element matching a specific format, using jQuery

Question

I asked a similar question earlier, however my wording provided correctly submitted answers but not for the question I was actually trying to answer:) In an attempt to not muddle SO's listings, I've posted this question separately.

Given the HTML below, what is the most convenient means of removing all the classes from #item_3 that begins with "child_"?

The solution needs to be able to keep the "stays_put" class and not effect any of the other list elements.

<ul id="list">
  <li id="item_1" class="child_1 child_12">Item 1</li>
  <li id="item_2" class="child_4 child_6">Item 2</li>
  <li id="item_3" class="child_3 child_1 stays_put">Item 3</li>
</ul>

The question that I originally asked, can be found here. Using Reg Ex in jQuery selection

Answer 1

Well, I suppose you could mess with the class attribute directly, like this:

$('#item_3').attr('class', function() {
    return $.trim($(this).attr('class').replace(/child_\S+/g, ''));
});

Basically you search for classes prefixed with child_, replace with nothing, then set the class attribute with the resulting string. The regex /child_\S+/g matches child_ followed by non-whitespace character(s), since class names are space-separated.

jsFiddle preview