jquery remove matching classes?

Question

I have a list of stuff with thing like

                    <ul>
                        <li>
                            <div class="pack1 active1"><span>$3.99</span></div>
                        </li>
                        <li>
                            <div class="pack2"><span>$5.99</span></div>
                        </li>
                        <li>
                            <div class="pack3 active3"><div id="ribbon"><span>40</span></div><span>$6.99</span></div>
                        </li>
                        <li>
                            <div class="pack4"><span>$10.99</span></div>
                        </li>
                        <li>
                            <div class="pack5"><span>$259.99</span></div>
                        </li>
                    </ul>

and I want to remove all the active* classes on click. I've tried to do something like $('*[class^="active"]').removeClass() but that isn't working

Any help?

Matthias Hryniszak · Accepted Answer · 2011-03-29 20:55:04Z

8

OK, I tested it and this definitely works even if there are more than one "active-something" classes assigned to one element:

$('[class*="active"]').removeClass(function(i, c) {
  return c.match(/active\d+/g).join(" ");
});

The 'i' is the index of matched element and 'c' is the value of the class attribute for the matched element so you don't need to "ask" for it again. $("...").removeClass() can remove all classes specified by the value so if there are more than one "active-something" classes assigned to this element we're returning all the occurences from the call to match (using the 'g' option at the end of the regular expression) and then concatenating it so that the actual removeClass function then can process it accordingly.

edited Mar 29, 2011 at 20:55

answered Mar 29, 2011 at 20:50

Matthias Hryniszak

3,1614 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bryan Downing Over a year ago

+1 - However, if you run this function on a collection of elements that may or may not have the specified class, match will return null which causes a syntax error when you try to run the join method. Obviously selecting the elements with $('[class*="active"]') negates the issue, but if you're working with a collection of elements selected by some other criteria you would need to check if the element has a desired class or convert the null output of match to an empty array.

moe · Accepted Answer · 2011-03-29 20:35:29Z

1

Something like this might do:

$('*[class~="active"]').removeClass(function() {
    var match = $(this).attr('class').match(/active\d{1,}/);
    return match ? match[0] : '';
});

Basically, you are returning the classname that match finds

edited Mar 29, 2011 at 20:35

answered Mar 29, 2011 at 20:28

moe

29.9k4 gold badges21 silver badges16 bronze badges

Comments

TheSoftwareJedi · Accepted Answer · 2015-10-26 15:14:52Z

1

Here is a bit better implementation:

    $('.my-selector').removeClass(function(i, c)
    {
        var matches = c.match(/\S*active\S*/g);
        return matches ? matches.join(' ') : false;
    });

edited Oct 26, 2015 at 15:14

TheSoftwareJedi

35.3k22 gold badges112 silver badges151 bronze badges

answered Oct 9, 2013 at 12:33

Aatif Farooq

1,8561 gold badge14 silver badges15 bronze badges

Comments

JaredPar · Accepted Answer · 2011-03-29 20:28:13Z

0

Try the following

$('[class~="active"]').removeClass();

The ~= syntax matches attributes who's value contains the specified word. Documentation

http://api.jquery.com/attribute-contains-word-selector/

The ^= syntax used in your question matches attribute values which start with the specified text. This doesn't appear to be what you're looking for.

answered Mar 29, 2011 at 20:28

JaredPar

759k151 gold badges1.3k silver badges1.5k bronze badges

5 Comments

Dutchie432 Over a year ago

This might be problematic if ever the user has a class called inactive or any other class name that contains the text active

JaredPar Over a year ago

@Dutchie432 agreed. But the OP's question said they wanted to remove classes which had active in the name.

Dutchie432 Over a year ago

Agreed. I think (IMHO) that description of the user's situation is most likely misleading. I suppose I am making an assumption about what the user wants. This is a great pointer otherwise.

Matthias Hryniszak Over a year ago

The word is not "active" but "active1" or "active2" which does not fall into the selector...

Matthias Hryniszak Over a year ago

And the description ain't misleading IMHO. It's short and to the point. But that's me :D

Adrien Schuler · Accepted Answer · 2011-03-29 20:54:42Z

0

$('div[class^="active"]').click(function() {
    $(this).each(function() {
       $(this).removeClass();
    });
});

edited Mar 29, 2011 at 20:54

answered Mar 29, 2011 at 20:28

Adrien Schuler

2,4251 gold badge22 silver badges32 bronze badges

2 Comments

Matthias Hryniszak Over a year ago

^="..." matches only if the value of the attribute starts with "active" which is not the case...

Matthias Hryniszak Over a year ago

One more thing: removeClass() without parameters removes all classes - not only the requested one... So you need to use it VERY CAREFULLY!

Mark Costello · Accepted Answer · 2011-03-29 20:56:12Z

0

$('div[class*="active"]').removeClass(function() {
    return $(this).attr("class").match(/active\d{1}/).join(" ");
});

answered Mar 29, 2011 at 20:56

Mark Costello

4,3944 gold badges25 silver badges26 bronze badges

2 Comments

Matthias Hryniszak Over a year ago

you don't need to ask for the class again - it's passed on to the callback method

Mark Costello Over a year ago

I just got that! The solution below from Matthias Hryniszak is a better solution...

Prisoner ZERO · Accepted Answer · 2011-03-30 01:43:13Z

Your description doesn't say what you want to click on; what should trigger what; or how you want to treat inactive members etc. So...I'll embellished a bit on the functionality.

What you do really depends on how much control you have on the HTML in question. But there's no way to really determine that from your explanation. However, if you want to affect all classes that START WITH "active" then use this my examples event-definition: $('div[class^="active"]')

In the meantime, let's pretend you HAVE some control on the HTML in question.

Here is some food for thought

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>

    <script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script>

    <style type="text/css">
        .list li
        {
            cursor: pointer;
        }
        .active
        {
            color: Green;
        }
        .inactive
        {
            color: grey;
        }
    </style>

    <script type="text/javascript">

        ///<summary>Removes an active row.</summary>
        function deactivate() {
            $(this).parent().remove();
        }
        ///<summary>Change an inactive row to an active row.</summary>
        function activate() {
            $(this).removeClass('inactive').addClass('active').click(deactivate);
        }

        $(document).ready(function() {
            // Also, just as an extra, use "context" to limit the scope of any jQuery selector-search.
            // That way on large pages your selector doesn't search through the whole page,
            // it only searches the tables HTML.
            // Doing so is a short-cut for: $('#tblMyTable').find('tr.clickTrigger');
            var context = $('ul.list');

            $('div.inactive', context).click(activate);
            $('div.active', context).click(deactivate);
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
         <ul class="list">
            <li>
                <div class="pack1 active">
                    <span>$3.99</span>
                </div>
            </li>
            <li>
                <div class="pack2 inactive">
                    <span>$5.99</span>
                </div>
            </li>
            <li>
                <div class="pack3 active">
                    <div id="ribbon">
                        <span>40</span>&nbsp;@&nbsp;<span>$6.99</span>
                    </div>
                </div>
            </li>
            <li>
                <div class="pack4 inactive">
                    <span>$10.99</span>
                </div>
            </li>
            <li>
                <div class="pack5 inactive">
                    <span>$259.99</span>
                </div>
            </li>
        </ul>
    </form>
</body>
</html>

Dutchie432 · Accepted Answer · 2011-03-29 20:29:08Z

-1

How many different active classes are there? You could just do...

for (var x=1; x<=5; x++)
    $('.active' + x).removeClass('active' + x);

JSFiddle Live Demo

answered Mar 29, 2011 at 20:29

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

3 Comments

Steven Over a year ago

There is only 5 of them so this seems like the easiest way.

Dutchie432 Over a year ago

If there were 500, all you would need to do is change the x<=5 to x<=500 - The code does not become more lengthy.

Dutchie432 Over a year ago

For 5 classes? Not likely. For 1,000 - maybe.

Collectives™ on Stack Overflow

jquery remove matching classes?

8 Answers 8

1 Comment

Comments

Comments

5 Comments

2 Comments

2 Comments

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

Comments

5 Comments

2 Comments

2 Comments

Comments

3 Comments

Related