ジャバ教えてください

ジャバスクリプトの勉強をしており下記の質問でつまずいてしまったのでどなたかご教授お願いします。
名前とニックネームの追加時、各行の右端に削除ボタンを出力しなさい。
ボタンをクリックするとボタンがある行を削除する処理を作成しなさい。

削除ボタンが一つのセルにしか出ず押して処理する方法がわからない状態です。

<!DOCTYPE html> <html> <head> <title>アカウント登録</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
      .base {
        margin: 2% 7% 0;
        height: 500px;
        background: blue;
        padding: 5% 10%;
        box-shadow: 5px 9px 8px 5px rgba(0, 0, 0, 0.5);
      }
      input {
        width: 300px;
        height: 40px;
        font-size: large;
      }
      #tuikaBtn {
        background: green;
      }
      h1 {
        font-family: serif;
      }
      .form-control::placeholder {
          color: #cacaca;
          opacity: 1;
      }
      table {
        border-collapse: collapse; 
      }

      th,td {
        border: 1px solid #312929;
        padding: 5px 10px;
      }
      .card {
        width: 100%;
        height: 350px;
      }
      .back{
        padding: 30px;
        position: absolute;
        bottom: 0;
        right: 0;
      }
      .form-group{
        margin: 10px 0 15px 0px;
      }
      #result {
        font-size: 120%;
        margin: 10;
        margin: 10px 20px;
        padding: 10px 5px 20px;
        margin: 10px 5px 10px 5px;
      }

      .row .card{
        color: red;
      }

      .card{
        color: blue;
        display: block;
        position: relative;
      }

      #modal{
        display: none;
        margin:1.5em auto 0;
        background-color: white;
        border: 1px solid black;
        width: 50%;
        padding: 10px 20px;
        position: fixed;
        border-radius: 5px;
      }

      #overLay{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 120%;
        background-color: rgba(0,0,0,0.75);
      }

    </style>
</head>
<body>
    <div class="base container">
      <div class="row">
        <h1>アカウント登録</h1>
      </div>
      <div class="row">
        <div class="card" id="card">
          <div class="card-block">
            <form id="form-area" class="form-inline" method="post">
                <div class="form-group">
                    <div class="input-group">
                      <input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
                    </div>
                </div>

                <div class="form-group">
                  <input id="tuikaBtn" type="button" name="touroku" value="追加" onclick="OnButtonClick();">
                </div>

            </form>
            <div id="tuikaMoto">

            </div>
            <div id="result">
	<table id="Tuikatbl">
	</table>	
	</div>
          </div>
        </div>
      </div>  
    </div>
  </div>
  <div id="overLay">
  </div>
    <script>
 	function OnButtonClick() {
		if(!targetnamae.value == "" || !targetnickname.value == ""){
			var res　= confirm(targetnamae.value + "さん"  + targetnickname.value　+ "を登録します。よろしいですか？");
			if(res == true){

      
				
				let newRow = targetTuikatbl.insertRow();

				let newCell = newRow.insertCell();
				let newText = document.createTextNode(targetnamae.value);
				newCell.appendChild(newText);

				newCell = newRow.insertCell();
				newText = document.createTextNode(targetnickname.value);
				newCell.appendChild(newText);

                newCell = newRow.insertCell();
				newCell.appendChild(targetbtn);
				


				
				alert(targetnamae.value + "さん"  + targetnickname.value　+ "にて登録しました");
				cntn++;
				if(cntn == 3){
					targetBtn.style.display ="none"; 
				}
			}
		}
    }



        	let cntn = 0; 
 		let targetresult = document.getElementById("result")
      	let targetnamae = document.getElementById("namae");
	let targetnickname = document.getElementById("nickname");
	let targetBtn = document.getElementById("tuikaBtn");
	let targetTuikatbl = document.getElementById("Tuikatbl");	
    let targetbtn = document.createElement("button");
    targetbtn.innerHTML = "削除";	

    </script>
</body>

</html>

回答1件

ベストアンサー

１・名前とニックネームの追加時、各行の右端に削除ボタンを出す

現状の問題点

javascript 部分を見ると、以下のような構造になっています。

js
1	// ★function 内の処理は「追加ボタンが押されるたびに実行」される
2	function OnButtonClick() {
3		if(!targetnamae.value == "" || !targetnickname.value == ""){
4
5			// ... 中略 ...
6
7			newCell = newRow.insertCell();
8			newCell.appendChild(targetbtn); // ← (*2) 一つの削除ボタンを使いまわしている
9
10			// ... 中略 ...
11
12		}
13	}
14
15	// ★以下の処理は「ページを開いたときに一度だけ実行」される
16	let cntn = 0; 
17	let targetresult = document.getElementById("result")
18	let targetnamae = document.getElementById("namae");
19	let targetnickname = document.getElementById("nickname");
20	let targetBtn = document.getElementById("tuikaBtn");
21	let targetTuikatbl = document.getElementById("Tuikatbl");	
22	let targetbtn = document.createElement("button"); // ← (*1) 一回しかcreateElementされない
23	targetbtn.innerHTML = "削除";

削除ボタンを createElement している位置 (*1) に注目してください。
追加ボタン押下時の処理（ OnButtonClick ）の外側で createElement されていますので、このページを開いたとき一度しか削除ボタンが生成されないことになります。
そして、一つしかない削除ボタンを (*2) で appendChild しています。
この場合、画面上では最後に appendChild した削除ボタンのみが表示されることになります。

修正方法

追加ボタンを押すたびに削除ボタンを生成するよう、修正が必要です。

diff
1 	function OnButtonClick() {
2 		if(!targetnamae.value == "" || !targetnickname.value == ""){
3 			
4 			// ... 中略 ...
5 			
6+			// ★追加ボタンを押すたびに、削除ボタンを createElement する。
7+			let targetbtn = document.createElement("button");
8+			targetbtn.innerHTML = "削除";
9
10 			newCell = newRow.insertCell();
11 			newCell.appendChild(targetbtn);
12 			
13 			// ... 中略 ...
14 			
15 		}
16 	}
17 	
18 	let cntn = 0; 
19 	let targetresult = document.getElementById("result")
20 	let targetnamae = document.getElementById("namae");
21 	let targetnickname = document.getElementById("nickname");
22 	let targetBtn = document.getElementById("tuikaBtn");
23 	let targetTuikatbl = document.getElementById("Tuikatbl");	
24-	let targetbtn = document.createElement("button");
25-	targetbtn.innerHTML = "削除";

２・削除ボタンをクリックするとボタンがある行を削除する

「ボタンがクリックされた」「データが入力された」「キーボードが押された」などの出来事を イベント と呼びます。
イベント が発生した時に処理を行うには addEventListener という命令（メソッド）を使います。

[構文]

js
1// 「要素名」はイベントの発生元。例えば削除ボタンなど。
2// 「イベント名」はイベントの名前。例えば 'click' や 'input' など。
3要素名.addEventListener('イベント名', function(){
4    // イベント発生時の処理
5});

[コード例]

diff
1 	function OnButtonClick() {
2 		if(!targetnamae.value == "" || !targetnickname.value == ""){
3 			
4 			// ... 中略 ...
5 			
6 			let targetbtn = document.createElement("button");
7 			targetbtn.innerHTML = "削除";
8+			targetbtn.addEventListener('click', function(){
9+				// ここに「削除ボタンがクリックされたときの処理」を書く
10+			});
11
12 			newCell = newRow.insertCell();
13 			newCell.appendChild(targetbtn);
14 			
15 			// ... 中略 ...
16 			
17 		}
18 	}

行の削除は、

js
1targetTuikatbl.deleteRow(行番号);

という命令（メソッド）があるので、それを使うと良いでしょう。
https://developer.mozilla.org/ja/docs/Web/API/HTMLTableElement/deleteRow

押されたボタンと同じ行を削除しなければならないので注意してください。
行番号を取得する方法はMDNのドキュメントから探してみてください。
https://developer.mozilla.org/ja/docs/Web/API/HTMLTableRowElement

投稿2023/05/24 04:04

shinoharat

総合スコア1592

回答へのコメント

akuaaaa

2023/05/24 23:06

めちゃくちゃわかりやすいです。教えていただき本当にありがとうございます。

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.69%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

トップ JavaScriptに関する質問

ジャバ教えてください

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！