JQuery - remove selected class when using "Attribute starts with" selector?

Question

Working with auto-generated html code, with variable classnames: table-col-44, table-col-19, table-col-121 etc.

I've got a loop that's going through and selecting these variable classes using this jQuery selector functionality:

for(r in replace){
    var targ = replace[r];
    $("[class^='"+targ+"']").each(function(){
        ...
    })
}

The problem is, once I've selected the classes I want to scrub, I can't find a way to target them to remove them. Often these are <p> and <td> tags that have other classes that need to be preserved, so I can't just wipe the class attribute altogether. Is there a way to pass the matched class as an argument to the each() function? Or perhaps there's some kind of $(this).removeClass([selected]) keyword that comes with jQuery? Totally stumped here. Thanks for the help!

Thanks for the input. That only works if the class in question is the first class in the list - unfortunately, most of the time, that isn't the case in this code. — CodeMoose, Mar 25 '13 at 17:12
Your selector `"[class^='"+targ+"']"` will only select the first class. — Musa, Mar 25 '13 at 17:14
I believe that's incorrect. I've successfully selected elements that match the 2nd or 3rd class using this method. — CodeMoose, Mar 25 '13 at 17:19
My mistake, you were right. *= instead of ^= is necessary to select any class. — CodeMoose, Mar 25 '13 at 17:41

score 2 · Accepted Answer · edited May 23 '17 at 12:21

2

Not sure if there's a more jQuery way of doing this but you could try this inside the each:

var newClassName = $(this).attr('class').split(' ').slice(1).join(' ')
$(this).attr('class', newClassName)

This will remove the first class name since you've matched with ^=.

Update:

See here for an example of removing a class by passing a function to removeClass: http://jsfiddle.net/DHxNG/1/. The JS is:

targ = 'table-col';
$('[class*="'+targ+'"]').removeClass(function(index, css) {
    var re = new RegExp(targ+"-\\d+");
    return (css.match(re) || []).join(' ');
});

This is based on code from here: JQuery removeClass wildcard

edited May 23 '17 at 12:21

Community

1
1

answered Mar 25 '13 at 17:10

ramblex

3,042
21
20

^= matches all classes that start with the input string, not just the first. Looking to remove the class no matter where it appears in the classname list. – CodeMoose Mar 25 '13 at 17:16
That doesn't seem to be the case for me, I needed to use `*=` instead of `^=` – ramblex Mar 25 '13 at 17:34
Brilliant! That was indeed my misunderstanding. Kudos to you sir. – CodeMoose Mar 25 '13 at 17:40

score 0 · Answer 2 · answered Mar 25 '13 at 17:09

You can add a startsWith function to the string object's prototype, doing something like this:

if (typeof String.prototype.startsWith != 'function') {
    String.prototype.startsWith = function (str){
        return this.indexOf(str) == 0;
    };
}

Then your loop to remove the classes that start with whatever was matched on looks like this:

for(r in replace) {
    var targ = replace[r];
    $("[class^='"+targ+"']").each(function() {
        var $element = $(this);
        var classes = $(this).attr('class').split(' ');
        for(var i = 0; i < classes.length; i++) {
            var cssClass = classes[i];
            if(cssClass.startsWith(targ)) {
                $element.removeClass(cssClass);
            }
        }
    });
}

JQuery - remove selected class when using "Attribute starts with" selector?

2 Answers2