jquery remove class which contains a specific word

Question

I have many classes in my HTML for example .margin-15 , .margin-30 etc.

My question is how can I delete all classes containing margin-.

I tried with .removeClass but I do not know how to delete all classes that contain a particular string.

Thanks for help.

please search for the an answer before just posting one: https://stackoverflow.com/questions/57812/remove-all-classes-that-begin-with-a-certain-string — mrdeadsven, Apr 05 '18 at 12:09
Try to do it yourself before asking or show us what you got ! But the idea could be 1/ Select all element that contain 'margin-', 2/ Remove the class ! — Mickaël Leger, Apr 05 '18 at 12:13
@Pat I post an anwser you could use I think, you just need to adapt for your case :) — Mickaël Leger, Apr 05 '18 at 13:16

score 1 · Answer 1 · answered Apr 05 '18 at 12:13

1

An alternative is selecting the elements with classnames which contain margin- and then loop and filter those who don't contain margin-

$( "[class*='margin-']" ).each(function(_, ele) {
  var currentClass = $(ele).attr('class');
  console.log("Current class:", currentClass);
  var classNames = currentClass.split(/\s+/).filter(function(c) {
    return !c.includes('margin-');
  }).join(' ');

  console.log("After filter:", classNames);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="margin-12 eleclass"></div>

answered Apr 05 '18 at 12:13

Ele

33,468
7
37
75

Is your solution remove the class from the element too? It's much shorter than mine solution for sure ! I still have a lot to learn ! – Mickaël Leger Apr 05 '18 at 12:41
@MickaelLeger no, this example only filters. This is just to illustrate! – Ele Apr 05 '18 at 13:13
Oh ok, I wasn't sure :) I could have use this in my answer, I'm still using too much loop :x – Mickaël Leger Apr 05 '18 at 13:15

score 0 · Answer 2 · answered Apr 05 '18 at 12:35

Here is an example of how you can do it : in my example I want to remove all the class that contains color- :

1/ You select all element that contains color- (and maybe other class)

2/ I loop throught each element and get all the class

3/ I split the class by space (" ") so I now have an array with all the class for each element

4/ I loop throught my class array and check if the class contains color-

5/ If I find the class that contains color- (here it can be color-red, color-blue, color-green) I remove it from my block.

I think you can adapt it to remove all your margin-!

$(document).ready(function() {
  $("#remove").click(function() {
    var $div_list = $("div[class*=color-]");
    
    $.each($div_list, function() {
      var $current_div = $(this);
    
      var class_list = $(this).attr("class");  
      class_list = class_list.split(/ +/);
      
      $.each(class_list, function(key, value) {
        var current_class = value;
        
        if (current_class.indexOf("color-") !== -1) {
          $current_div.removeClass(current_class);
        }
      });
    });
  });
});

.color-red { color: red;}
.color-blue { color : blue; }
.color-green { color : green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-red test">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="color-blue test2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="color-green test3 test4">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<button type="button" id="remove">Remove color</button>

Is it what you are looking for?

jquery remove class which contains a specific word

2 Answers2