How to add one class at a time and remove previously added classes?

Question

How to add only selected class and remove other class which is selected before?

<html>
    <select name="Button-Style" id="Button-Style" style="width:100%;">

     <option value="Sun-Flower">Sun Flower</option>
     <option value="orange-flat">orange-flat</option>


   </select>


    <script>
    $(document).ready(function(){
        $('#Button-Style').change(function(){
          if($(this).val() == 'sun-flower'){
             $("#$id>input").addClass('sun-flower-button');
              }
          else if($(this).val() == 'orange-flat'){
             $("#" + id).addClass('orange-flat-button');
              }



          else{

              }
        });
    });
    </script>
</html>

I want to add only one class at a time.

Possible duplicate of [Remove all classes except one](http://stackoverflow.com/questions/5363289/remove-all-classes-except-one) — Abhitalks, Sep 15 '16 at 08:35

Mudassir Hasan · Answer 1 · 2016-09-15T08:44:30.733

I am not sure to selection of element on which you are adding class but you can use removeClass() without supplying parameter to function to remove all previously applied class to item and then add your class as you are doing using addClass()

   if($(this).val() == 'sun-flower'){
       $("#$id>input").removeClass(); // Remove all classes .. although please check selector 
       $("#$id>input").addClass('sun-flower-button');
         }
          else if($(this).val() == 'orange-flat'){
              $("#" + id).removeClass();
             $("#" + id).addClass('orange-flat-button');
              }

Also may I suggest passing class name directly from option values in select item. Then no need for extra if condition .

<select name="Button-Style" id="Button-Style" style="width:100%;">
     <option value="Sun-Flower-button">Sun Flower</option>
     <option value="orange-flat-button">orange-flat</option>
</select>

and in jquery

$('#Button-Style').change(function(){
  var className = $(this).val();
  $('#inputElement').removeClass();
  $('#inputElement').addClass(className);        
});

This is the right answer, see [here](http://stackoverflow.com/a/1424991/3274964). — roberto06, Sep 15 '16 at 08:38

score 0 · Answer 2 · answered Sep 15 '16 at 08:36

You can do it like this with jquery.

            $('.selected_check').change(function () {

                if ($(this).is(":checked")) {
                    var x = $(this).closest('tr').prop('id');
                    var id = "#" + x;
                    $(id).removeClass('td_bgcolor');
                    $(id).addClass('highlight_row');
                } else {
                    var y = $(this).closest('tr').prop('id');
                    var id = "#" + y;
                    $(id).removeClass('highlight_row');
                    $(id).addClass('td_bgcolor');
                }

            });

simply use removeClass and addClass cheers!!

score 0 · Answer 3 · edited Sep 15 '16 at 09:03

0

If you are trying to remove all previous classes and add a new one, you can use jQuery's toggleClass function.

edited Sep 15 '16 at 09:03

clinton3141

4,751
3
33
46

answered Sep 15 '16 at 08:36

Kenzo_Gilead

2,187
9
35
60

score 0 · Answer 4 · answered Sep 15 '16 at 08:39

Use removeClass() function in jQuery.

As for example;

HTML:

<div id="adiv" class="1st-class"></div>

Now jQuery;

$("#adiv").addClass("2nd-div");             // This 'll add 2nd-class with the div

$("#adiv").removeClass("1st-div");          //This 'll remove the 1st-class from the div.

Now if you want to remove all previous added class simply do;

$("#adiv").removeClass();                   //removeClass without any argument removes all class

score 0 · Answer 5 · answered Sep 15 '16 at 08:41

I'm having some difficulty understanding your question, but I think I get the gist of it.

Say you have the following HTML:

<div class="menu">
  <div class="menu--option">Option 1</div>
  <div class="menu--option">Option 2</div>
  <div class="menu--option">Option 3</div>
</div>

Whenever someone clicks on an option, we want to add the class s-active to it, while making sure it is the only one with that class. You will want to do something like this:

// First, we listen to the click event.
$("menu--option").click(function () {

  // When it fires, we select all of the menu options,
  // and iterate over them, removing '.s-active' from it
  // if the element has the class.
  $("menu--option").each(function () {
    $(this).removeClass("s-active");
  });

  // Finally, we add '.s-active' to the element that was clicked.
  $(this).addClass("s-active");
}

Hopefully this was helpful!

score 0 · Answer 6 · answered Sep 15 '16 at 08:42

0

You can code it in this way!

 $('#Button-Style').change(function(){
$(this).removeClass();
if($(this).val()=="your_option_value"){
$(this).addClass("new_class");}
}

answered Sep 15 '16 at 08:42

Muhammad Usman

10,039
22
39

How to add one class at a time and remove previously added classes?

6 Answers6