How to remove class of li if there is using multiple classes in li

Question

The HTML Code

echo  "<ul id='sub'>";
if($Set == null){ 
echo '<li class="BlankSeat" ></li>';
}

if in database status yes or no add class in red color

elseif($status == 'no' || $status == 'yes'){
echo '<li class="occupied" title="Row'.$val1.'" name="'.$val2.'" 
value="'.$val3.'"></li>'; 
 }
 elseif($name=='PINK'){
echo '<li class="pink" title="Row'.$val1.'" name="'.val2.'" 
value="'.$val3.'"></li>';
}
elseif($name=='YELLOW'){
echo '<li class="yellow" title="Row'.$val1.'" name="'.$val2.'" 
value="'.$val3.'"></li>';
 }
else{
 echo '<li class="orange" title="Row'.$val1.'" name="'.$val2.'" 
 value="'.$val3.'"></li>';
 }
echo "</ul>";   
}
echo '</div>';
}
else
{
 echo "No result Available";
 }

This is my code

$('li').click(function(e) {
var $this = $(this);

First part where iam adding class when click on one of them

if($(this).hasClass('pink')|| $(this).hasClass('yellow') || 
$(this).hasClass('orange'))
{
$(this).addClass('Booked').removeClass('pink','yellow','orange');
}

Here i want to remove the booked class with only which one is clicked

else
{
$(this).addClass('pink').removeClass('Booked');
$(this).addClass('yellow').removeClass('Booked');
$(this).addClass('orange').removeClass('Booked');
}}

Possible duplicate of [Removing multiple classes (jQuery)](https://stackoverflow.com/questions/1485647/removing-multiple-classes-jquery) — Carsten Løvbo Andersen, Sep 12 '17 at 06:11
@CarstenLøvboAndersen sir first part is okay.but in else part when Booked class is active ,now when i again click on Booked ,after that the same class should be added which last time changed — krish, Sep 12 '17 at 06:16
please include all relevant code, (html) else its very hard to help you — Carsten Løvbo Andersen, Sep 12 '17 at 06:16

SilverSurfer · Accepted Answer · 2017-09-12T07:54:40.433

1

Try this:

$(document).on("click", "li", function(e) {
   if($(this).hasClass('pink')|| $(this).hasClass('yellow') || $(this).hasClass('orange')){
      $(this).toggleClass("Booked")
      console.log($(this).attr("class"))
   }
})

.pink{
  background-color:pink;
}
.yellow{
  background-color:yellow;
}
.orange{
  background-color:orange;
}
.Booked{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='sub'>
  <li class="BlankSeat"> Item 3</li>
  <li class="occupied"> Item 3</li>
  <li class="pink"> Item 3</li>
  <li class="yellow"> Item 4</li>
  <li class="orange"> Item 5</li>
</ul>

edited Sep 12 '17 at 07:54

answered Sep 12 '17 at 06:16

SilverSurfer

4,281
6
24
50

1

not working sir.when i agin clicking on Booked class it change the class orange only – krish Sep 12 '17 at 06:20
Updated answer, hope it helps – SilverSurfer Sep 12 '17 at 06:32
else part not working sir.. change the class as orange only – krish Sep 12 '17 at 06:38
How do u want exactly add 3 classes color? Obviusly only work last class color. Tell whats exactly you need to help you please – SilverSurfer Sep 12 '17 at 06:48
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/154199/discussion-between-krish-and-silversurfer). – krish Sep 12 '17 at 06:49

Raphael · Answer 2 · 2017-09-12T07:10:01.673

0

Use this

$(this).addClass('Booked').removeClass('pink yellow orange');

See help here

Edit:

Sample JS to my comment below

if($(this).hasClass('pink') || 
   $(this).hasClass('yellow') || 
   $(this).hasClass('orange')) {
    $(this).addClass('Booked');
} else if($(this).hasClass('Booked')) {
    $(this).removeClass('Booked');
}

Sample CSS to my comment below

.Booked {
    background-color: blue !important; // whatever style your .Booked should have
}

edited Sep 12 '17 at 07:10

answered Sep 12 '17 at 06:10

Raphael

990
1
13
24

1

first part is okay.but in else part when Booked class is active ,now when i again click on Booked ,after that the same class should be added which last time changed – krish Sep 12 '17 at 06:15
Well if you want to restore the previous class you can go with this: Add Booked class on click, but do not remove pink yellow orange. Now .Booked should style the
with !important styles

Raphael

Sep 12 '17 at 06:25

Added a sample above – Raphael Sep 12 '17 at 07:08

How to remove class of li if there is using multiple classes in li

2 Answers2