What is the cleaner way to remove all classes except one in jquery, also without adding the class if there isn't the class already

Question

Well, there is one popular way to clean all classes except one like

 jQuery('#d-one label').attr('class', 'main');

But, the above code also adds main class even if there wasn't there at first.

One workaround is to check if it has the class main or not and perform accordingly. But is there any way cleaner and shorter than this?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="d-one">
  <label for="" class="main one two three"></label>
</div>
<script>
  jQuery('#d-one label').attr('class', 'main');
  console.log(jQuery('#d-one label').attr('class'));
</script>



<div id="d-two">
  <label for="" class="one two three"></label>
</div>
<script>
    jQuery('#d-two label').attr('class', 'main');
    console.log(jQuery('#d-two label').attr('class'));
</script>
<!-- This not just remove, but also add new class -->



<div id="d-three">
  <label for="" class="one two three"></label>
</div>
<script>
    if($( "#d-three label" ).hasClass( "main" )){
    jQuery('#d-three label').attr('class', 'main');
  }else{
    jQuery('#d-three label').removeClass();
  }
  console.log(jQuery('#d-three label').attr('class'));
</script>

`removeClass()` has a function [parameter](https://api.jquery.com/removeclass/) you can use. — Lain, Sep 15 '20 at 11:42
"Removing all except one" sounds like a perfect use-case for setting the class attribute to that one specific class you want to keep. So why would you look for an alternative? And how does "main is added" contradict that requirement? Unless "main" isn't the class you want to keep, in which case you'd obviously not use it in the command...? — , Sep 15 '20 at 11:42
@ChrisG You can check the `d-two`, it adds the `main` classes. As there was not it on the original case. — Saroj Shrestha, Sep 15 '20 at 11:44
Does this answer your question? [Using JQuery removeClass() to remove all classes but one](https://stackoverflow.com/questions/14322225/using-jquery-removeclass-to-remove-all-classes-but-one) — Lain, Sep 15 '20 at 11:44
I get that, but the `d-two` example doesn't fit your question title. "remove all classes except one" is perfectly solved by `.attr('class', "that_one_class")`, so please clarify your requirement as per my previous comment. — , Sep 15 '20 at 11:45
Solution 3 is fine and clean. You can wrap it into a function if you wanna call it several times. — BNilsou, Sep 15 '20 at 11:47
@Chris G: I disagree with your wording. *Removing all but one* does not mention *adding one* anywhere. If I ask you to remove all vegetables except apples from all shelves, would you add apples to shelves without? — JavaScript, Sep 15 '20 at 11:47
I interpreted "remove all classes except one" as implying that the element currently possesses the one not supposed to be removed. I see now that doesn't have to be the case though. — , Sep 15 '20 at 11:51
@Saroj Shrestha: It does work fine. The issue is that you set the class to **main** in your jQuery before using `jQuery('#d-two label').attr('class', 'main');` — Lain, Sep 15 '20 at 12:04
@Lain could you show your js fiddle by using the above code mentioned. — Saroj Shrestha, Sep 15 '20 at 12:23

Carsten Massmann · Accepted Answer · 2020-09-15T13:27:31.587

The following should work:

jQuery('#d-one label').filter('.main').attr('class', 'main')
                      .end().not('.main').removeClass()

It first selects all <label>-elements under #d-one, then filters for class "main" and sets these to class="main". After that the filter is revoked (.end()) and all "non-.main" elements are cleared of all possible classes.

$('#d-one label').filter('.main').attr('class', 'main')
                 .end().not('.main').removeClass()

.one {border: red 1px solid}
.two {background-color: #ccc}
.three {color: green}
.main {font-weight:900}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="d-one">
 <div id="d-four">
   <label for="" class="main one two three">label: main stays and one two three removed!</label>
 </div>
 <div id="d-two">
   <label for="" class="one two three">label: one two three removed!</label>
 </div>
 <div id="d-three">
   <label for="" class="one two three">label: one two three removed!</label>
 </div>
</div>
 </div>
 <div id="d-five">
   <label for="" class="main one two three">label: main one two three - unchanged</label>
 </div>

What is the cleaner way to remove all classes except one in jquery, also without adding the class if there isn't the class already

1 Answers1