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.

Answer 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> 

Answer 2

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?