1

We have several CSS classes with the following pattern below. They all start with either bg-- or color--. How can I check if an element contains the CSS class substring using jQuery and if found then remove it?

Examples:

  1. bg--white
  2. bg--red
  3. bg--orange
  4. color--orange
  5. color--red
  6. color--purple

What I tried 

$(function() {
  var divEl = $('div');
  if(divEl.hasClass('*=bkg--') {
    divEl.removeClass('*=bkg--'); 
  }
  if(divEl.hasClass('*=color--') {
    divEl.removeClass('*=color--'); 
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bkg--red color--white">Holisticly build resource sucking methodologies before distributed methodologies. </div>
<div class="bkg--orange color--white">Phosfluorescently integrate revolutionary collaboration and idea-sharing through efficient services.</div>
<div class="bkg--purple color--purple">Credibly maximize impactful e-tailers with resource-leveling convergence. </div>
usernameabc
  • 662
  • 1
  • 10
  • 30
  • Are you looking to see if they start with bg-- or color-- or trying to get the value after the --? – hawkstrider Aug 06 '18 at 18:37
  • @bhmahler sorry i had to update the question because I forgot to mention the remove part. – usernameabc Aug 06 '18 at 18:37
  • 1
    Possible duplicate of [Using 'starts with' selector on individual class names](https://stackoverflow.com/questions/2178416/using-starts-with-selector-on-individual-class-names) – Heretic Monkey Aug 06 '18 at 18:38

1 Answers1

2

You can access the desired .prop() ("class" in your case) and change it on the fly using JS's String.prototype.replace()

$("div").prop("class", function( i, cls ) {

  console.log("Before: "+ cls )
  cls = cls.replace(/(^|\s)(bg|color)--\S+/g, '');
  console.log("After: "+ cls )
  
  return cls;
});
.bg--white {background: white;}
.bg--red {background: red;}
.bg--orange {background: orange;}
.color--orange {color: orange;}
.color--red {color: red;}
.color--purple {color: purple;}
<div class="test bg--red color--white">Holisticly</div>
<div class="foo--bar bg--orange color--white">Phosfluorescently</div>
<div class="bg--purple color--purple">Credibly</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

Or simply:

$("div").prop("class", function( i, cls ) {
  return cls.replace(/(^|\s)(bg|color)--\S+/g, '');
});

Or if you use a JS compiler (like i.e: Babel.js)

$("div").prop("class", (i, c) => c.replace(/(^|\s)(bg|color)--\S+/g, ''));

Additionally, instead of using the too general $("div") you can instead change your selector to:

$("[class^='bg--'], [class*=' bg--'], [class^='color--'], [class*=' color--']")

It's a bit long but it does the job perfectly fine.

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • i found out that i can use `[class^="bkg--"]` to get what i need, but this worked really well. – usernameabc Aug 06 '18 at 18:54
  • @usernameabc nope. Because `[class^="bkg--"]` will **not work** if your element has another leading class like i.e: `class="test bg-orange"` – Roko C. Buljan Aug 06 '18 at 18:56
  • @RokoCbuljan I just tested that and found the same as you mentioned. All the more reason to continue with the approach you provided. – usernameabc Aug 06 '18 at 18:57
  • @usernameabc I expanded on my answer if you want to get rid of the somewhat too iterative `$("div")` selector. – Roko C. Buljan Aug 06 '18 at 19:00