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, Jun 14 '12 at 00:15
Hey... using the first line of code in your question and the info you can glean from this answer to a similar question (http://stackoverflow.com/a/57819/414972) can you get something that will work? — Thomas Clayson, Jun 14 '12 at 00:20
I would use `filter()` with a quick regex like `$els.filter(function(){ return /partialClassName/.test(this.className) })` — elclanrs, Jun 14 '12 at 00: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, Jun 14 '12 at 00:25
Thank you, @elclanrs I can see that working, but I went with jules suggestion and made a helper function. — Ricalsin, Jun 14 '12 at 02:59

score 1 · Accepted Answer · answered Jun 14 '12 at 01:18

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 '12 at 01:18

Jules

1,423
13
22

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. :) – Ricalsin Jun 14 '12 at 03:04

JK. · Answer 2 · 2012-06-14T00:54:52.430

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 '12 at 00:54

answered Jun 14 '12 at 00:39

JK.

21,477
35
135
214

You could improve this slightly: $('[id^=partialIDname]').removeClass('partialClassNameFull partialClassNameHalf'); – thebiffboff Jun 14 '12 at 00:45
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. – Ricalsin Jun 14 '12 at 03:03

jQuery selector on multiple classes

2 Answers2