Delete all classes after a specific class

Question

I have

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

I need to be able to remove all classes after class3 using jQuery.

sort of

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

OR

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

Please, how can I do this?

Answer 1

You can try the following, but your classes may not be in the order in which 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 concise way would be to simply cut the line directly :

 $('#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 need to add it to the jQuery prototype first:

 $.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/

Answer 2

 function removeAllClass(selector, after, before) { $(selector).attr('class', function(i, oldClass) { var arr = oldClass.split(' '); if (!before) { arr.splice(arr.indexOf(after)+1).join(' '); return arr.join(' '); } else { return arr.slice(arr.indexOf(after), arr.indexOf(before) + 1).join(' '); } }); } 

Application:

• after class3

  removeAllClass('#thisdiv', 'class3');

  Demo

• from class1 to class3

  removeAllClass('#thisdiv', 'class1', 'class3');

  Demo

According to the comment

UPDATE: I wonder if I can work with $ ('# thisdiv') removeAllClass ('class3') ;.

 $.fn.removeAllClass = function(after, before) { $(this).attr('class', function(i, oldClass) { var arr = oldClass.split(' '); if (!before) { arr.splice(arr.indexOf(after) + 1).join(' '); return arr.join(' '); } else { return arr.slice(arr.indexOf(after), arr.indexOf(before) + 1).join(' '); } }); } 

Application:

• after class3

  $('#thisdiv').removeAllClass('class3');

  Demo

• from class1 to class3

  $('#thisdiv').removeAllClass('class1', 'class3');

  Demo

Answer 3

Simple demo http://jsfiddle.net/XaBjX/

Behavior: anything after class3 will be deleted, you can see warnings before and after on the screen

Used APIs: indexOf , prop , removeClass .

Hope this helps,

the code

 var getClass = $("#thisdiv").prop('class'); alert(" Classes before remove ==> " + getClass); getClass = getClass.substr(getClass.indexOf('class3')+1); $("#thisdiv").removeClass(getClass.toString()); alert("Classes After remove ==> "+ $("#thisdiv").prop('class'));​ 

Answer 4

try the following:

 var c = $('#thisdiv').prop('class') $('#thisdiv').prop('class', c.slice(0, c.indexOf('3')+1)) 

Demo

Answer 5

There is no built-in way to handle “classes” like this. But there should be no shortage of ways to cut the string, and that’s it.

Take the class string ( getClass() ), modifying it using any string trimming method that suits your requirements, and then set it again with .attr('class', newString) .

Answer 6

Not. There is no real guarantee that classes will be in any order.

If they are indexed somehow, you can parse them ... but otherwise it won’t work. If you're just trying to save information, consider using HTML-modeled .data () functions.

Answer 7

To do something like this can be a little expensive. You need to replace class attr, iterating over existing classes and removing those that do not meet your criteria. The order of classes from the class attribute is not guaranteed in any order, in the general case:

 function removeAbove(prefix, max) { var regex = new RegExp('^' + prefix + '(\\d+)$'); return function (v) { var match = regex.exec(v); if (!match || parseInt(match[1], 10) <= max) { return v; } } } function processClasses(keys, fn) { var i = keys.length, result = [], temp; while (i--) { temp = fn(keys[i]); if (temp) { result.push(temp); } } return result.join(' '); } $('#thisdiv').attr('class', function (idx, cls) { return processClasses(cls.split(' '), removeAbove('class', 3)); });