Dodaj klasę dla klikniętego przycisku i usuń klasę z rodzeństwa

Question

Chcę dodać klasę do klikniętego przycisku i usunąć tę klasę ze wszystkich rodzeństwa (przycisk). Poniższy kod dodaje CSS dla przycisków, które klikam i nie mogę usunąć CSS dla przycisków, które są już zastosowane.

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

Po kliknięciu usuwam klasę buttonSelectedze wszystkich przycisków, a następnie dodaję ją do tego, który został kliknięty

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

To powinno działać:

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