CODEWITHSUNDEEP
javascriptjquery
Steven
Steven

Reputation: 13975

jquery remove matching classes?

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?

Upvotes: 3

Views: 7088

Answers (8)

Aatif Farooq
Aatif Farooq

Reputation: 1846

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;
    });

Upvotes: 1

Prisoner ZERO
Prisoner ZERO

Reputation: 14166

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>

Upvotes: 0

Mark Costello
Mark Costello

Reputation: 4394

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

Upvotes: 0

Matthias Hryniszak
Matthias Hryniszak

Reputation: 3162

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.

Upvotes: 8

Adrien Schuler
Adrien Schuler

Reputation: 2425

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

Upvotes: 0

moe
moe

Reputation: 29704

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

Upvotes: 1

Dutchie432
Dutchie432

Reputation: 29160

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

Upvotes: -1

JaredPar
JaredPar

Reputation: 754565

Try the following

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

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

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.

Upvotes: 0

Related Questions