Question

I have a

< div id="thisdiv" class="class1 class2 class3 class4 class5"> text < /div>

I need to be able to delete all classes after class3 with jQuery.

something like

$('#thisdiv').removeClass(all after class3);

OR

$('#thisdiv').attr('class', all from class1 to class3);

Please how can I do that?

Answer 1

You can try the following, but your classes might not be in the same order as they appear in the HTML source:

$('#thisdiv').attr('class', function(i, v)
{
    var classes = v.split(' '),
        position = $.inArray('class3', classes);

    return classes.slice(0, position + 1).join(' ');
});

Here’s the fiddle: http://jsfiddle.net/FNUK2/

---

A more succinct way would be to just slice the string itself:

$('#thisdiv').attr('class', function(i, v)
{
    return v.substr(0, v.indexOf('class3') + 6);
});

but I find working with arrays easier.

---

If you want to use it in the jQuery chain, you’ll have to first add it to jQuery’s prototype:

$.fn.removeClassesAfter = function(className)
{
    return this.each(function()
    {
        $(this).attr('class', function(i, v)
        {
            var classes = v.split(' '),
                position = $.inArray(className, classes);

            return position == -1 ? v : classes.slice(0, position + 1).join(' ');
        });
    });
};

Here’s the fiddle: http://jsfiddle.net/FNUK2/11/