Remove css class containing a particular string

Question

How to select and remove class from an element based on string?

E.g

How to remove class="s2" from element <p class="s2 s4 s5"></p>

I'm looking for way to select class based on number - e.g 's' can be string on any signs. Please note that the order can be different.

Any suggestion much appreciated.

Answer 1

What you're looking for is .removeClass:

$('p.s4.s5').removeClass('s2');

EDIT:

$('p').removeClass(function(i, class) {
    var classes = class.split(' ');  //get an array of all the classes
    var remove = [];                 //classes to remove

    $.each(classes, function() {
        if(this.match(/2$/))   //if the class name ends in 2
            remove.push(this); //add it to the list of classes to remove
    });

    return remove.join(' ');
});

demo

Answer 2

Try this:

//Get an array of css classes
var aryClasses = $('p').attr('class').split(' ');

//Loop over array and check if 2 exists anywhere in the class name
for(var i = 0; i < aryClasses.length; i++)
{
    //Check if 2 exists in the class name
    if(aryClasses[i].indexOf('2') != -1)
    {
        //2 Exists, remove the class
        $('.s2').removeClass(aryClasses[i]);
    }
}

Here's a working JS Fiddle

EDIT

As someone pointed out in the comments, the above code will only remove the CSS classes from the first p tag (as per your example). The code below will remove all CSS classes ending in two from all p elements.

$('p').each(function() {
    var aryClasses = $(this).attr('class').split(' ');

    for (var i = 0; i < aryClasses.length; i++) {
        if (aryClasses[i].indexOf('2') != -1) {
            $(this).removeClass(aryClasses[i]);
        }
    }
});