CODEWITHSUNDEEP
javascriptjquery
Frauds
Frauds

Reputation: 137

Remove class when click another button using JQuery

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

enter image description here

$(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>

Upvotes: 3

Views: 4690

Answers (4)

Ram Segev
Ram Segev

Reputation: 2573

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>

Upvotes: 1

Swati
Swati

Reputation: 28522

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>

Upvotes: 2

Exterminator
Exterminator

Reputation: 1246

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');
  });
});

Upvotes: 0

Karthick
Karthick

Reputation: 381

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

it will work!

Upvotes: 4

Related Questions