jquery remove multiple variable classes

Question

I have the following DOM elements:

<div id="container">
    <ul class="block-grid three-up">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
    </ul>
</div>

What I want to do is for the ul to have a class that states which li is being hovered over. So far, I have:

$('#container li').hover(function() {
        i = $(this).index() + 1;
        // need function to remove all classes that start with n- here
        $('#container ul').addClass('n-'+i);
        $(this).addClass('active');
    }, function() {
        // need function to remove all classes that start with n- here
        $(this).removeClass('active');
    }
);

I need to figure out a way for it to remove all classes that start with n- as well because as the code is written now, it is just adding and adding classes to the ul. I can't simply remove all other classes because there are additional classes there that I need for structural reasons. And I know that there is not a way to use a wildcard in removeClasses. Is there some kind of regular expression I can use here?

Why are you using `n-` classes in the first place? They're _your_ elements? You don't have to index them using classes... If you _must_, what's wrong with using a for loop? — Benjamin Gruenbaum, Jun 21 '13 at 19:44
You need to rethink this. Why are you adding classes with an incrementing number to begin it, it makes no sense. — adeneo, Jun 21 '13 at 19:44
possible duplicate of [Remove all classes that begin with a certain string](http://stackoverflow.com/questions/57812/remove-all-classes-that-begin-with-a-certain-string) — Shaddow, Jun 21 '13 at 19:45
@adeneo it's not an incrementing number. It's just the index+1 because I don't want the index to be 0-based. So when you're hovering over the 2nd element, I want the ul to have n-2 as the class. — isabisa, Jun 21 '13 at 19:48

score 5 · Accepted Answer · answered Jun 21 '13 at 19:56

To answer the question, and just for fun, here's a plugin that removes classes based on what they start with :

$.fn.removeClassStartsWith = function(param) {
    return this.each(function() {
        var classes = this.className.split(/\s+/g),
            newclasses = [];

        $.each(classes, function(_,klass) {
            if ( $.trim(klass).indexOf(param) !== 0 ) 
               newclasses.push($.trim(klass));
        });

        this.className = newclasses.join(' ');
    });
}

to be called as :

$('elements').removeClassStartsWith('n-');

FIDDLE

score 2 · Answer 2 · answered Jun 21 '13 at 19:51

One method I can think off without regex is storing the current class in a variable and then removing it.

var prev;
$('#container li').hover(function () {
    var i = $(this).index() + 1;
        prev = `n-` + i;
    $('#container ul').addClass(prev);
    $(this).addClass('active');
}, function () {
    i = $(this).index() + 1;
    $(this).removeClass('active');
    $('#container ul').removeClass(prev);
});

Check Fiddle

But as the comments suggested , it is a bad practice to do so

jquery remove multiple variable classes

2 Answers2