クリックして色変更→別のボタンを押した時色を元に戻したい

前提・実現したいこと

複数ボタンがある中で、
ボタン１をクリック→背景色変更
ボタン２をクリックをしたときにボタン１の色を元に戻したいです

発生している問題・エラーメッセージ

removeClassを入力していますがうまく作動しません

確認しましたがエラーメッセージは出ていません。

該当のソースコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>クリックイベントと切り替え</title>
  <link rel="stylesheet" type="text/css" href="base.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script>
  $(function(){
    // ここに処理を記述
    $('#button1').on('click', function() {
      $(this).css('background-color','red');
      $(this).removeClass('clicked');
      $('#button2').on('click', function(){
        $(this).css('background-color','red');
        $(this).removeClass('clicked');

      });
    });
  });
  </script>
</head>
<body>
  <div id="wrapper">
    <div id="button1" class="button">
      <p>button1</p>
    </div><!-- button1 -->
    <div id="button2" class="button">
      <p>button2</p>
    </div><!-- button2 -->
    <div id="button3" class="button">
      <p>button3</p>
    </div><!-- button3 -->
  </div><!-- wrapper -->
</body>
</html>



### 補足情報（FW/ツールのバージョンなど）
ボタンは全部で3つありますが、一旦2つで記載しています

yambejp

2021/08/17 03:49

ソースは「```」で囲んでマークダウンしてください一度色のついたボタンをもう一度おしても戻さなくていいのですか？

osaya

2021/08/17 04:10

マークダウン承知しました。気をつけます！いただいた回答で見本通り動作しました！ので、おそらく戻さなくて大丈夫です。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1$(function(){
2  $('.button').on('click', function() {
3    $('.button').css('background-color','');
4    $(this).css('background-color','red');
5  });
6});