jQuery selector on multiple classes

Question

This finds the id but does not remove the class

$('[id^=paritalIDname]').removeClass('[class^=partialClassName]');

Probably because the element looks like

<div id="partialIDname-full" class="something someone partialClassNameFull">

Whether the element has a class name of partialClassNameFull or partialClassNameHalf I need to remove it.

I thought I could use a wildcard in the class selector, like

removeClass('[class^=partialClassName*]');

but that's not working.

What is a good solution? (Thanks.)

You can't do pattern matches on class names. Instead, arrange for there to be two classes: "partialClassName" and "partialClassNameFull". — Pointy
– Pointy, Commented Jun 14, 2012 at 0:15
Hey... using the first line of code in your question and the info you can glean from this answer to a similar question (stackoverflow.com/a/57819/414972) can you get something that will work? — Thomas Clayson
– Thomas Clayson, Commented Jun 14, 2012 at 0:20
I would use filter() with a quick regex like $els.filter(function(){ return /partialClassName/.test(this.className) }) — elclanrs
– elclanrs, Commented Jun 14, 2012 at 0:21
If there is only two classes and you want them removed why not just use removeClass('partialClassNameFull partialClassNameHalf') whichever class is present will be removed. — Musa
– Musa, Commented Jun 14, 2012 at 0:25

Jules · Accepted Answer · 2012-06-14 01:18:13Z

1

This will handle all partial match.

        $("div[id^=partialId]").each(function () {
            var cls = $(this).attr("class").split(" ");

            for (var i in cls) {
                if (/partialClass/.test(cls[i])) {
                    $(this).removeClass(cls[i]);
                    break;
                }
            }
        });

answered Jun 14, 2012 at 1:18

Jules

1,42313 silver badges22 bronze badges

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

1 Comment

Ricalsin Over a year ago

Yep, and that's what I needed - "all" partial matches. Thanks Jules! (BTW, you remove the break and return below to make sure you get through the for loop.) -- but you knew that. :)

JK. · Accepted Answer · 2012-06-14 00:54:52Z

0

You need to explicitly remove both classes:

$('[id^=partialIDname]').removeClass('partialClassNameFull').removeClass('partialClassNameHalf');

Because .removeClass() only works on full class name matches. If one of the class names is not present, then nothing will happen - no error is thrown when you try to .removeClass() a class that is not present.

You can also try out as suggested in the comments the briefer version of:

$('[id^=partialIDname]').removeClass('partialClassNameFull partialClassNameHalf');

edited Jun 14, 2012 at 0:54

answered Jun 14, 2012 at 0:39

JK.

21.6k35 gold badges139 silver badges223 bronze badges

2 Comments

thebiffboff Over a year ago

You could improve this slightly: $('[id^=partialIDname]').removeClass('partialClassNameFull partialClassNameHalf');

Ricalsin Over a year ago

If it were only two class names then I would not bother asking the question. The need for the solution arose when building a multi-form page that manipulated the DOM extensively in order to ease the user into the required information being sought. The ability to remove several classes by calling a filtered class name made it easier to handle the various stages.

Collectives™ on Stack Overflow

jQuery selector on multiple classes

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related