Remove class when click another button using JQuery

Question

I'm figure out for how to remove class selected when clicking other button. I've made code below but still not working. Can anyone help me?

EDIT

The case study, I have 2 choice boxes. box 1 and box 2. each box has 2 options. When click on box 1 option 1 and move to box 1 option 2, it works fine. But when I click box 2 option 1, the options in box 1 should not change. So there will be 2 buttons that have the selected class, namely box 1 choice 2 and box 2 choice 1

$(document).ready(function(){
  $('.box-1 button, .box-2 button').on('click', function(){
    $(this).addClass('selected');
    $('.box-1 button, .box-2 button').not(this).removeClass('selected');
  });
});

button{
  border:none;
  background-color:#1f45;
  padding: .5rem 2.5rem;
  border-radius: 2rem;
}

.box-1{
  margin-bottom: 15px;
}

button.selected{
  background-color: #578889;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Box 1 Choice</h3>
<div class="box-1">
  <button>Box 1 Option 1</button>
  <button>Box 1 Option 2</button>
</div>

<h3>Box 2 Choice</h3>
<div class="box-2">
  <button>Box 2 Option 1</button>
  <button>Box 2 Option 2</button>
</div>

Karthick · Accepted Answer · 2021-01-17 13:54:41Z

4

$(document).ready(function(){
  $('button').on('click', function(){
     $('button').removeClass('selected');
     $(this).addClass('selected')
  });
});

it will work!

answered Jan 17, 2021 at 13:54

Karthick

3812 silver badges7 bronze badges

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

2 Comments

Tibebes. M Over a year ago

please consider using a runnable stack snippet (<ctrl> + m while editing)

Karthick Over a year ago

i don't know this until u say, thanks for your tip @Tibebes.M

Swati · Accepted Answer · 2021-01-17 14:13:02Z

2

You can use .not(this) to exclude button which is clicked and remove selected class from there

Demo Code :

$(document).ready(function() {
  $('button').on('click', function() {
    $(this).addClass('selected');
    $(this).closest('div').find('button').not(this).removeClass('selected');
  });
});

button {
  border: none;
  background-color: #1f45;
  padding: .5rem 2.5rem;
  border-radius: 2rem;
}

button.selected {
  background-color: #578889;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-1">
  <button>Box 1 Option 1</button>
  <button>Box 1 Option 2</button>
</div>

<div class="box-2">
  <button>Box 2 Option 1</button>
  <button>Box 2 Option 2</button>
</div>

edited Jan 17, 2021 at 14:13

answered Jan 17, 2021 at 13:55

Swati

28.5k4 gold badges26 silver badges45 bronze badges

4 Comments

Frauds Over a year ago

sorry, i edited my question content. the case study, I have 2 choice boxes. box 1 and box 2. each box has 2 options. When click on box 1 option 1 and move to box 1 option 2, it works fine. But when I click box 2 option 1, the options in box 1 should not change. So there will be 2 buttons that have the selected class, namely box 1 choice 2 and box 2 choice 1 @Swati

Pranav Patel Over a year ago

Why don’t you give separate Id”s to those buttons, by doing this you can easily identify them and can make separate action for each button

Swati Over a year ago

@PranavPatel That depends on op .

Pranav Patel Over a year ago

@Swati ,yeah that is right,I beg your pardon on this as your stack score says you are good programmer, but it is good practice na ?

Ram Segev · Accepted Answer · 2021-01-17 14:18:32Z

1

remove selected class before adding it to button You to make it work in different wrappers you need $(this).parent(), and then search for call selected

$(document).ready(function(){
  $('button').on('click', function(){
  $(this).parent().find('.selected').removeClass('selected');
    $(this).addClass('selected');
  });
});

button{
  border:none;
  background-color:#1f45;
  padding: .5rem 2.5rem;
  border-radius: 2rem;
}

button.selected{
  background-color: #578889;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-1">
  <button>Box 1 Option 1</button>
  <button>Box 1 Option 2</button>
</div>

<h3>Box 2 Choice</h3>
<div class="box-2">
  <button>Box 2 Option 1</button>
  <button>Box 2 Option 2</button>
</div>

edited Jan 17, 2021 at 14:18

answered Jan 17, 2021 at 13:58

Ram Segev

2,5612 gold badges14 silver badges24 bronze badges

1 Comment

Frauds Over a year ago

sorry, i edited my question content. the case study, I have 2 choice boxes. box 1 and box 2. each box has 2 options. When click on box 1 option 1 and move to box 1 option 2, it works fine. But when I click box 2 option 1, the options in box 1 should not change. So there will be 2 buttons that have the selected class, namely box 1 choice 2 and box 2 choice 1

Exterminator · Accepted Answer · 2021-01-17 13:55:10Z

0

You have to remove the class from every button and after that to the clicked button

$(document).ready(function(){
  $('button').on('click', function(){
    $('button').removeClass('selected');
    $(this).addClass('selected');
  });
});

answered Jan 17, 2021 at 13:55

Exterminator

1,2467 silver badges14 bronze badges

1 Comment

Tibebes. M Over a year ago

please consider using a runnable stack snippet (<ctrl> + m while editing)

Collectives™ on Stack Overflow

Remove class when click another button using JQuery

4 Answers 4

2 Comments

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related