Removing current css class and adding new class using jquery

Question

How to remove current class added to div and add new class according to condition set?

My css contain 3 different classes:

.red   { background:red }

.blue  { background:blue }

.green { background:green }

at the time I want to add only one class to div id #box according to condition set by jquery variable my_color .my_color has 3 values blood,garden,sky only one set at the time.

jquery:

<script type="text/javascript">  
 (document).ready(function() {

      if(my_color == "blood")
             { /*help me to remove  current class and add .red */}
      else if(my_color == "garden")
             {/*help me to remove  current class and add .green */ }
      else if(my_color == "sky")
             {/*help me to remove  current class and add .blue */ }

 });
</script>

Its look like a previous one answered stackoverflow.com/a/14685691/1957479 — Language Lassi
– Language Lassi, Commented Feb 4, 2013 at 11:41

Anton · Accepted Answer · 2013-02-04 09:49:23Z

1

this replaces the class on box with red/green/blue

   if(my_color == "blood")
           {  $('#box').attr('class','red');}
      else if(my_color == "garden")
            { $('#box').attr('class','green');}
      else if(my_color == "sky")
         {   $('#box').attr('class','blue');}

answered Feb 4, 2013 at 9:49

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

salexch · Accepted Answer · 2013-02-04 09:50:22Z

1

$('#box').attr('class', '').addClass(my_color );

answered Feb 4, 2013 at 9:50

salexch

2,7041 gold badge21 silver badges17 bronze badges

Comments

Matt Zeunert · Accepted Answer · 2013-02-04 09:58:09Z

1

You can remove all classes before assigning a new one:

 (document).ready(function () {
     $(element).removeClass("red blue green");
     if (my_color == "blood") {
         $(element).addClass("red");
     }
     if (my_color == "garden") {
         $(element).addClass("green");
     }
     if (my_color == "sky") {
         $(element).addClass("blue");
     }
 });

Using .attr('class', '') instead of removeClass will work too, but it will also remove any other classes your element might have.

You can also use a mapping object to clean up the code a bit:

 (document).ready(function () {
     $(element).removeClass("red blue green");
     var colorDictionary = {
         "blood": "red",
         "garden": "green",
         "sky": "blue"
     };
     $(element).addClass(colorDictionary[my_color]);
 });

edited Feb 4, 2013 at 9:58

answered Feb 4, 2013 at 9:49

Matt Zeunert

16.6k7 gold badges56 silver badges83 bronze badges

3 Comments

galexy Over a year ago

Thanks matt, just trying it

galexy Over a year ago

using .attr('class', '') removes all other classes added to div . so better is to remove only particular class.

Matt Zeunert Over a year ago

@galexy Yes. Suppose you wanted to add another class that would specify the size and of your element. Every time you call set the class attribute to "" all the classes will be removed and the element will revert back to its default styles. If you just remove the classes used for the setting the color the class specifying the size of the element will remain untouched.

Hary · Accepted Answer · 2013-02-04 09:51:11Z

0

you can do this with $.removeAttr() and $.addClass().

At first remove all the classes set to the #div and then only apply the needed class. To be more specific you can only remove the unwanted class with $.removeClass()

 (document).ready(function() {

   $("#box").removeAttr("class");

      if(my_color == "blood")
         { 
            $("#box").addClass("red"); 
         }
      else if(my_color == "garden")
         { 
            $("#box").addClass("green"); 
         }
      else if(my_color == "sky")
         { 
            $("#box").addClass("blue"); 
         }

 });

answered Feb 4, 2013 at 9:51

Hary

5,8368 gold badges49 silver badges91 bronze badges

Comments

EnterJQ · Accepted Answer · 2013-02-04 09:51:38Z

0

<script type="text/javascript">  
  (document).ready(function() {

  if(my_color == "blood")
         {$("#select_element").removeClass("blue").addClass("red");}
  else if(my_color == "garden")
         { $("#select_element").removeClass("red").addClass("green"); }
  else if(my_color == "sky")
         { $("#select_element").removeClass("green").addClass("blue"); }

  });
 </script>

answered Feb 4, 2013 at 9:51

EnterJQ

1,0168 silver badges18 bronze badges

Comments

swapnesh · Accepted Answer · 2013-02-04 10:11:15Z

0

$('#selectorId').removeClass('red');
$('#selectorId').addClass('green');

edited Feb 4, 2013 at 10:11

swapnesh

26.8k24 gold badges97 silver badges129 bronze badges

answered Feb 4, 2013 at 9:50

Nirman

6,83322 gold badges82 silver badges148 bronze badges

Collectives™ on Stack Overflow

Removing current css class and adding new class using jquery

6 Answers 6

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related