how to remove classes ending with some characters from elements

Question

I got elements with the javascript code below;

var elems = $("*[class*='-highlight datepick-other-month']");

I want to remove classes end with "-highlight" such as; red-highlight, blue-highlight and etc, from "elems".

How can I do this? All feedbacks will be appreciated!

Answer 1

You can use this code :

elems.attr('class', function(_, old){
    return $.grep(old.split(/ +/), function(v){
         return !v.match(/-highlight$/);
    }).join(' ');
})

Working fiddle : http://jsfiddle.net/zvcCL/

Answer 2

You need to use the ends with selector: http://api.jquery.com/attribute-ends-with-selector/

jQuery( "[attribute$='value']" )

Then call removeClass: http://api.jquery.com/removeclass/

Answer 3

Try this:

 $( "a[hreflang|='en']" ).css( "border", "3px dotted green" );

Also see attributeContainsPrefix selector.

Answer 4

here is how you select elements that end with a keyword: jQuery Ends With

and here is how you select elements inside elems:

$([what],[where])

so you would want to do this:

var elems = $("*[class*='-highlight datepick-other-month']");
$("*[class$='-highlight']",elems).remove();

this is how you remove the elements from the document.
if you want however, to exclude those elements from your elems var, you can just exclude them as follows:

var elems = $("*[class*='-highlight datepick-other-month']").not("[class$='-highlight']");

Answer 5

You can remove those classes using regexp:

$.each($("*[class*='-highlight']"), function() {
  $(this)[0].className = $(this)[0].className.replace(/\b.*-highlight\b/g, '');  
});

Here is a demo: http://jsfiddle.net/wzQFT/