JavaScript ToDoリスト ''削除ボタン'' 押したボタンのある行を削除したい。

実現したいこと

現在ToDoリストを作成しています。
table要素を使用して、一行ごとにタスクが表示される仕組みを作っています。

削除ボタンを生成して機能させることはできているのですが、任意の行を削除できず困っています。
タスクを削除するためのボタンについてお聞きしたいです。

何行かタスクを入力し表示させた後、どの行でもいいので削除ボタンを押したとします。
その都度、毎回先頭の行のタスクが削除されてしまいます。

押下時のボタンのある行を消すには、どこを改める必要があるのでしょうか。

該当のソースコード

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4
5<head>
6  <meta charset="UTF-8">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <title>練習ToDoリスト</title>
9  <link rel="stylesheet" href="style.css">
10</head>
11
12<body>
13  <h1>ToDoリスト</h1>
14
15  <div class="radiobutton">
16    <label><input type="radio" name="radio1" value="1" id="radioall" checked>すべて</label>
17    <label><input type="radio" name="radio1" value="2" id="radiowork">作業中</label>
18    <label><input type="radio" name="radio1" value="3" id="radiodone">完了</label>
19  </div>
20
21  <table>
22    <thead>
23      <tr>
24        <th>ID</th>
25        <th>コメント</th>
26        <th>状態</th>
27      </tr>
28    </thead>
29    <tbody id="todo-body"></tbody>
30  </table>
31
32  <h2>新規タスクの追加</h2>
33  <label for="input-todo-box">ToDoリスト</label>
34  <input id="input-todo-box" type="text">
35  <button id="add-button">追加</button>
36
37  <script src='main.js'></script>
38</body>
39
40</html>
41

JavaScript
1
2`use strict`
3
4{
5  // 入力したTodoタスクの一覧を保持する配列を定義する
6  const todos = [];
7
8  //  HTMLのID値を使って以下のDOM要素を取得する
9  //  入力ボックス
10  //  追加ボタン
11  //  Todoリストを一覧表示するtable
12  const inputBox = document.getElementById('input-todo-box');
13  const addButton = document.getElementById('add-button');
14  const tableBody = document.getElementById('todo-body');
15
16  // 「追加」ボタンがクリックされたときの処理を実装する //
17  addButton.addEventListener('click', (event) => {
18    const todo = { comment: inputBox.value, status: '作業中' }
19    inputBox.focus();
20
21    // 空文字が入力されたときの処理
22    if (inputBox.value === '') {
23      alert('タスクを入力してください！');
24      return;
25    }
26    //todoがtrueの場合の処理
27    if (todo) {
28      todos.push(todo);
29      inputBox.value = '';
30      showTodos();
31    }
32  });
33
34  // 「todos」の中身を一覧表示するための関数を用意する //
35  const showTodos = () => {
36    tableBody.textContent = '';
37
38    // 値を１つずつ取り出し、繰り返し処理を実行
39    todos.forEach((todo, number) => {
40
41      // tbody要素に追加するためのtr要素を作成し、子要素としてtrを追加 //
42      const tableRecord = document.createElement('tr');
43      tableBody.appendChild(tableRecord);
44
45      // tr要素に追加するためのtd要素をそれぞれ作成する //
46      const tableId = document.createElement('td');
47      const tableComment = document.createElement('td');
48      const tableStatus = document.createElement('td');
49      const tableAction = document.createElement('td');
50
51      // 要素の中身のテキストを表示するため、オブジェクトの要素から取得する //
52      tableId.textContent = number;
53      tableComment.textContent = todo.comment;
54
55      // td要素をtr要素の子要素として追加する //
56      tableRecord.appendChild(tableId);
57      tableRecord.appendChild(tableComment);
58      tableRecord.appendChild(tableStatus);
59      tableRecord.appendChild(tableAction);
60
61　　　 // ボタン生成関数をtd要素の子要素として呼び出す
62      tableStatus.appendChild(createStatusButton());
63      tableAction.appendChild(createDeleteButton());
64    });
65  };
66
67　　//「状態機能」を管理するボタンを生成する関数
68  const createStatusButton = () => {
69    const statusButton = document.createElement('button');
70    statusButton.classList.add("doing");
71    statusButton.textContent = '作業中';
72    statusButton.addEventListener('click', () => {
73      if (statusButton.textContent === '作業中') {
74        statusButton.classList.add("doing");
75        statusButton.textContent = '完了';
76      } else {
77        statusButton.classList.add("done");
78        statusButton.textContent = '作業中';
79      }
80    });
81    return statusButton;
82  };
83
84　//「削除機能」を管理するボタンを生成する関数
85  const createDeleteButton = () => {
86    const deleteButton = document.createElement('button');
87    deleteButton.textContent = '削除';
88    deleteButton.addEventListener('click', () => {
89      todos.splice(tableRecord, 1);
90      showTodos();
91    });
92    return deleteButton;
93  };
94

試したこと

調べたこと
・MDN splice
・JavaScript Todoリスト削除先頭の行　など

削除機能を押した際の挙動の話なので、押した際に行われる動作(つまりspliceメソッド)に的を絞って検索しました。

消したいのは削除ボタンのある行そのものなので、
下記のように、関数の引数にtableRecordを入れて、tableRecord をspllceの引数にしてみました。
結果として、動作上は何も変わりませんでした。

JavaScript
1
2const createDeleteButton = (tableRecord) => {
3    const deleteButton = document.createElement('button');
4    deleteButton.textContent = '削除';
5    deleteButton.addEventListener('click', () => {
6     console.log(deleteButton);
7     todos.splice(tableRecord, 1);
8      showTodos();
9    });
10};

console.logでも確認しました。
結果、<button>削除</button> と出たので、要素はちゃんと紐付いていて問題ないと思いました。
それが間違っているのでしょうか。

推測として、以下のようにも思います。
どこの行を押しても同じように<button>削除</button>と出る
→ 一番上の要素が削除されてしまう(処理は上から順番に行われるから。)
→ その行そのものを指定する必要がある(?)
そのようなことも思ったのですがいかがでしょうか。

私の感覚では問題ないと思っていた箇所の出来事なので、
なぜ先頭の行が削除されてしまうかわかりません。
spliceメソッドが関係ない所で起きている問題かもしれません。
現在どこが間違っているのかを1つずつ確認し直しています。

どこを直したら良いのか、ヒントを頂けたら幸いです。
以上です！
よろしくお願いいたします！

補足情報（FW/ツールのバージョンなど）

エディタ : Visual Stadio Code

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

回答2件

javascript
1deleteButton.addEventListener('click', (e) => {
2  var t=e.target.closest('tr');
3  var idx=[...tableBody.querySelectorAll('tr')].indexOf(t);
4  t.parentNode.removeChild(t);
5  todos.splice(idx,1);
6});

投稿2020/06/22 11:07

編集2020/06/22 11:08

yambejp

総合スコア114843

yambejp

2020/06/22 11:08

驚くほどみんな同じソースで課題だされてるんですね？

gorinesia

2020/06/22 11:24

私もそう思い驚いています。たぶん皆さん、fizzbuzz、ToDoアプリ、クイズ問題みたいな流れでやってるのだと思います！

gorinesia

2020/06/22 11:25

こちらのコードも無事実装できました。このコードは私にとって全然知らない書き方でしたので、とても参考になりました！ありがとうございました！

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

ベストアンサー

HTMLTableRowElement.rowIndex

これを利用すると良いと思います。

引数として受け取ったtableRecordの行番号を取得して、その値をspliceの引数に与えると上手くいきます。（配列の添字が0始まりに対してrowIndexは1始まりであることに注意）

tableRecordは<tr>要素であり数値じゃないので直接spliceに入れようとすると0になってしまうのだと思います（おそらく）

実装を追記します。

js
1
2const showTodos = () => {
3  //略
4  tableAction.appendChild(createDeleteButton(tableRecord));
5}
6
7//略
8
9const createDeleteButton = (tableRecord) => {
10  var index = tableRecord.rowIndex-1;
11  const deleteButton = document.createElement('button');
12  deleteButton.textContent = '削除';
13  deleteButton.addEventListener('click', () => {
14    todos.splice(index, 1);
15    showTodos();
16  });
17  return deleteButton;
18};

投稿2020/06/22 08:32

編集2020/06/22 10:59

ohys

総合スコア147

gorinesia

2020/06/22 10:49

ご回答ありがとうございます！ MDNを読み、仰られていることをそのままコードに移しましたが、うまく機能しません。 todos.splice(tableRecord.rowIndex, 1); もしくは、 const rowIndexElement = tableRecord.rowIndex; todos.splice(rowIndexElement, 1); としてみたのですが、undifinedとなります。解釈の仕方が間違っているのでしょうか？

ohys

2020/06/22 10:58

大体それであってます。ただ、todosのインデックスが0 ~ n-1なのに対してrowIndexが1 ~ nであることを考慮する必要があります undefinedになるということは、showTodosの中からcreateDeleteButtonを呼び出すときに引数にtableRecordを与えていないのではないでしょうか。追記したので見てみてください

gorinesia

2020/06/22 11:21

実装できました。ご丁寧に説明してくださり、ありがとうございました。ただコードを写すだけでなく、しっかり論理を落とし込んで、人に説明できるようにします。ありがとうございました。

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

あなたの回答