Tambahkan kelas untuk tombol yang diklik dan hapus kelas dari saudara kandung

Question

Saya ingin menambahkan kelas ke tombol yang diklik dan menghapus kelas itu dari semua saudara (tombol). Kode di bawah ini menambahkan CSS untuk tombol yang saya klik dan tidak dapat menghapus CSS untuk tombol yang sudah diterapkan.

$("#followingButtonsId").children().addClass('buttonSelected')
            .parent().siblings().find('.buttonSelected').removeClass('buttonSelected');

.buttonSelected { background: #5b2200;}

<div class="row" id="followingButtonsId">
    <button class="buttonSelected">Button1</button>
    <button>Button2</button>
    <button>Button3</button>
</div>

Answer 1

Saat diklik, saya menghapus kelas buttonSelecteddari semua tombol dan kemudian menambahkannya di salah satu yang diklik

$('button').click(function(e) { $('button').removeClass('buttonSelected');
  $(e.target).addClass('buttonSelected');
});

.buttonSelected {
  background: #5b2200;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="followingButtonsId">
  <button class="buttonSelected">Button1</button>
  <button>Button2</button>
  <button>Button3</button>
</div>

Answer 2

Ini harus bekerja:

$("#followingButtonsId button").on("click", function() { $("#followingButtonsId button").removeClass("buttonSelected");
    $(this).addClass("buttonSelected");
});