名前とニックネームの追加時、各行の右端に削除ボタンを出力してボタンをクリックするとボタンがある行を削除する処理を作成したいです

javascript初心者です。
名前とニックネームの追加時、各行の右端に削除ボタンを出力してボタンをクリックするとボタンがある行を削除する処理を作成したいです。

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>アカウント登録</title>
5        <meta charset="UTF-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7</head>
8    <body>
9        <div class="base container">
10          <div class="row">
11            <h1>アカウント登録</h1>
12          </div>
13          <div class="row">
14            <div class="card" id="card">
15              <div class="card-block">
16                <form id="form-area" class="form-inline" method="post">
17                    <div class="form-group">
18                        <div class="input-group">
19                          <input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
20                        </div>
21                    </div>
22                    <div class="form-group">
23                        <div class="input-group">
24                            <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
25                        </div>
26                    </div>
27
28                    <div class="form-group">
29                      <input id="tuikaBtn" type="button" name="touroku" value="追加">
30                    </div>
31
32                    <table border="1" id="targetTable">
33                      <tr><td>名前</td><td>ニックネーム</td></tr>
34                      </table>
35
36                </form>
37                <div id="tuikaMoto">
38
39                </div>
40                <div id="result"></div>
41              </div>
42            </div>
43          </div>  
44        </div>
45      </div>
46      <div id="overLay">
47      </div>
48
49------javascript------
50<script>
51let namae = document.getElementById('namae');
52let nickname = document.getElementById('nickname');
53let tuikaBtn = document.getElementById('tuikaBtn');
54let tuikaTimes = 0;
55let table = document.getElementById('targetTable'); // 表の特定
56
57tuikaBtn.addEventListener('click',function () {
58let name = namae.value;
59let nName = nickname.value;
60if( !name || !nName ) return false;
61if(!window.confirm('「 '+ '[' + name + ']' + 'さん' + '[' + nName + ']' + 'を登録します。よろしいですか？」')) {
62return false;
63}
64tuikaTimes ++; console.log( tuikaTimes );
65alert('「'+'[' + namae.value +']' + 'さん' + '[' + nickname.value + ']' + 'にて登録しました。」');
66adtr(name, nName);
67if( tuikaTimes>=3 ){ tuikaBtn.style.visibility = 'hidden'; return false; }
68});
69
70function adtr(aa, bb){
71let newRow = table.insertRow(); // 行を追加します
72let newCell = newRow.insertCell(); // その行にセルを追加します
73let newText = document.createTextNode(aa); // セルの中身を書く
74newCell.appendChild(newText); // そのセルに中身を追加
75newCell = newRow.insertCell();// 次セルを追加します
76newText = document.createTextNode(bb);// セルの中身を書く
77newCell.appendChild(newText); // 次セルの中身を追加
78}
79      </script>
80    </body>
81</html>

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

回答1件

ベストアンサー

javascript
1<script>
2document.addEventListener('click',e=>{
3  const t=e.target;
4  const tbody=targetTable.querySelector('tbody');
5  if(t.matches('#tuikaBtn')){
6    const tr=`<tr><td>${namae.value}</td><td>${nickname.value}</td><td><input type="button" value="del" class="del"></td></tr>`;
7    tbody.insertAdjacentHTML('beforeend',tr);
8  }
9  if(t.matches('.del')){
10    t.closest('tr').remove();
11  }
12  tuikaBtn.toggleAttribute('hidden',tbody.querySelectorAll('tr').length>=3);
13});
14</script>
15
16<form id="form-area" class="form-inline" method="post">
17<input id="namae" name="namae" type="text" class="form-control" placeholder="名前"><br>
18<input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム"><br>
19<input id="tuikaBtn" type="button" name="touroku" value="追加">
20<table border="1" id="targetTable">
21<thead>
22<tr><th>名前</th><th>ニックネーム</th><th>-</th></tr>
23</thead>
24<tbody></tbody>
25</table>
26</form>