Javascriptのonclickでクリックしたボタンだけ選択状態（背景色付）、他は背景色を消したい

下記のようなhtmlに、テスト01、テスト02、テスト03の３つのボタンを作りました。
そこで、

テスト01をクリックすると、テスト01以外のボタンの背景は色無、
テスト02をクリックすると、テスト02以外のボタンの背景は色無、
テスト03をクリックすると、テスト03以外のボタンの背景は色無、、
どれか１つは必ず洗濯状態、
初期状態はテスト01
現在は３つでテストしているが、実際には100個くらいのボタンを作成したい

としたいのですが、うまく出来ずにおります（今はベタがきでtoggleをつけていますが、、頭が働かないので、明日再度考えようと思っています）。
アドバイスを頂けたら助かります。

index.html

html,Javascript,css
1
2<!DOCTYPE html>
3<html lang='ja'>
4<head>
5<meta http-equiv="Content-Type" content="application/javascript; charset=utf-8"/>
6<style type="text/css">
7<!--
8ul#sw_st{
9  display: -webkit-flex;
10  display: -moz-flex;
11  display: -ms-flex;
12  display: -o-flex;
13  display: flex;
14  width: 100%;
15  border: solid 1px #800;
16  text-align: left;
17  padding: 0px;
18  margin: 0px;
19  font-size: 1em;
20  text-align: center;
21  line-height: 0.8;
22}
23
24ul#sw_st>li{
25  border: solid 1px #999;
26  list-style: none;
27  box-sizing: border-box;
28  padding: 5px 10px;
29  width:100%;
30}
31
32.mizu{
33	background: #9FF;
34}
35//-->
36</style>
37
38<meta name="viewport" content="width=device-width, initial-scale=1">
39  <title>選択テスト</title>
40  <script src="js/jquery-3.3.1.min.js"></script>
41</head>
42
43<body>
44
45  <ul id="sw_st">
46    <li id="sw01">
47      テスト01
48    </li>
49    <li id="sw02">
50      テスト02
51    </li>
52    <li id="sw03">
53      テスト03
54    </li>
55  </ul>
56
57
58<script type="text/javascript">
59var swKeep = 0;
60  document.getElementById("sw01").onclick = function() {
61    this.classList.toggle('mizu');
62    swKeep = 1;
63
64    /* if ( this.classList.contains('mizu') ) {
65
66
67    } else {
68        console.log("01！消す");
69
70    } */
71  };
72
73  document.getElementById("sw02").onclick = function() {
74    this.classList.toggle('mizu');
75    if ( this.classList.contains('mizu') ) {
76        a.insertAdjacentHTML( 'afterend', 'true!' );
77    } else {
78        a.insertAdjacentHTML( 'afterend', 'false!' );
79    }
80  };
81
82  document.getElementById("sw03").onclick = function() {
83    this.classList.toggle('mizu');
84    if ( this.classList.contains('mizu') ) {
85        a.insertAdjacentHTML( 'afterend', 'true!' );
86    } else {
87        a.insertAdjacentHTML( 'afterend', 'false!' );
88    }
89  };
90</script>
91
92
93</body>
94</html>
95

追記：
回答で書いてくださったjsを入れるだけでちゃんと動きました。
ありがとうございます。

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

回答1件

ベストアンサー

JavaScript
1const $li = document.querySelectorAll( '#sw>li' );
2document.querySelector( '#sw' ).onclick = e => {
3  if ( e.target === e.currentTarget ) return;
4  let item = e.target.closest( 'li' );
5  $li.forEach( n => n.classList[ item === n ? 'add' : 'remove' ]( 'mizu' ) );
6}; // 編集前のコードがli要素の中にあるHTML要素に対応できていなかったのを修正
7```**動くサンプル：**[https://jsfiddle.net/2n8Lw4eu/2/](https://jsfiddle.net/2n8Lw4eu/2/)
8
9---
10
11【Document.querySelector() - Web API | MDN】
12[https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector)
13
14【Document.querySelectorAll() - Web API | MDN】
15[https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll)
16
17【Element.closest() - Web API | MDN】
18[https://developer.mozilla.org/ja/docs/Web/API/Element/closest](https://developer.mozilla.org/ja/docs/Web/API/Element/closest)