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

実現したいこと

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

挙動に関してのエラーは出ていないものの、削除ボタンの位置がおかしいところにある状態です。

該当のソースコード


test.html

<!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="追加">
                    </div>

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

                </div>
                <div id="result"></div>
              </div>
            </div>
          </div>  
        </div>
      <div id="overLay">
      </div>
      <script src="test.js"></script>
    </body>
</html>



test.js


var namae = document.getElementById("namae");
var nickname = document.getElementById("nickname");
var tuikaBtn = document.getElementById("tuikaBtn");
var result = document.getElementById("result");
var tuikaTimes = 0;

setInterval(() => {
	tuikaBtn.disabled = !namae.value || !nickname.value;
});


(function() {
  'use strict';

  function main() {
    var table = makeTable();
    var tbody = table.querySelector('tbody');
    setAddButton(tbody);
  };

  function makeTable() {
    var result = document.getElementById('result');
    var table = document.createElement('table');
    var thead = document.createElement('thead');
    var tbody = document.createElement('tbody');
    var tr = document.createElement('tr');
    var th1 = document.createElement('th');
    var th2 = document.createElement('th');
    var th3 = document.createElement('th');


    var deleteBtn = document.createElement('button');
    deleteBtn.innerHTML = 'Delete';
    deleteBtn.onclick = function (event) {
      row.parentNode.removeChild(row);
      event.target.parentNode.removeChild(event.target);
    };

    th1.textContent = '名前';
    th2.textContent = 'ニックネーム';
    th3.textContent = '削除';      

    tr.append(th1, th2, th3);
    thead.append(tr);
    table.append(thead, tbody);
    result.append(table);

    return table;
    
  
  };

  function setAddButton(tbody) {
    var nameInput = document.getElementById('namae');
    var nicknameInput = document.getElementById('nickname');
    var addButton = document.getElementById('tuikaBtn');

    addButton.addEventListener('click', function() {

      var okresult = window.confirm(`${namae.value} さん(${nickname.value}）を登録します。よろしいですか？`);


      if (nameInput.value === '' && nicknameInput.value === '') return;

      var tr = document.createElement('tr');
      var td1 = document.createElement('td');
      var td2 = document.createElement('td');


      td1.textContent = nameInput.value;
      td2.textContent = nicknameInput.value;
      


      tr.append(td1, td2);
      tbody.append(tr);
      
      document.body.appendChild(deleteBtn);
      thead.appendChild(row);

      tuikaTimes++;
      if (tuikaTimes >= 3) {
        addButton.style.visibility ="hidden";
      }
      
    });
  };


  document.addEventListener('DOMContentLoaded', main);
}());

試したこと

プログラミング初学者なため外部資料や参考文献を参照してみましたが、あまり理解できず
どなたか分かる方ご教授お願い致します。

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

回答1件

各行の右端に削除ボタンを出力し

現在のコードは、

js
1      tr.append(td1, td2);
2      tbody.append(tr);
3      
4      document.body.appendChild(deleteBtn);

行が変数 tr なのに document.body に deleteBtn を追加しているので、そりゃおかしいでしょう。もう一つ <td> を作って、ボタンはその中に入れて、その <td> も tr に append() すべきでしょう。

あと、ボタンは行毎に作られるべきものなので、deleteBtn を作る処理は makeTable() の中ではなくこの辺りに移動すべきです。

投稿2023/04/16 22:13

int32_t

総合スコア19631

回答へのコメント

daiku0919

2023/04/21 00:27

ご教授有難うございます。ご指摘受けました通り修正したんですが、ずっとdeleteBtn is not definedが表示されてしまいます。 ``` js var tr = document.createElement('tr'); var td1 = document.createElement('td'); var td2 = document.createElement('td'); var td3 = document.createElement('td'); var deleteBtn = document.createElement('button'); td1.textContent = nameInput.value; td2.textContent = nicknameInput.value; td3.textContent = '削除'; tr.append(td1, td2, td3); tbody.append(tr); deleteBtn.innerHTML = 'Delete'; deleteBtn.onclick = function (event) { row.parentNode.removeChild(row); event.target.parentNode.removeChild(event.target); }; tuikaTimes++; if (tuikaTimes >= 3) { addButton.style.visibility ="hidden"; } }); }; ```