削除ボタンの実装方法について

前提

初歩的な質問になります。

現在JavascriptでTodoリストを作成しております。
Javascriptからリストと削除ボタンを生成しましたが
削除ボタンに削除機能を与えるのに、どこにコードを書き始めたらいいのかわかりません・・・
現在は入力フォームに入れた内容のタスクが表示されるとともに
削除ボタンは生成（表示）される状態です。
削除ボタンに機能はついていない状態になります。

イベントリスナーを使って削除機能を実装するには
削除ボタンを生成したコードの中に記述したらよいのでしょうか？

実現したいこと

入力フォームに入れて表示されたタスクを
削除ボタンをクリックして削除したい。

現在はタスク生成とともに削除ボタンも生成（表示）される状態です。
削除ボタンに機能はついていない状態になります。

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

試したことに記載しておりますが、
そのコードですと下記のエラーが発生してしまいます。

JavaScript.js:63 Uncaught TypeError: Cannot read properties of undefined (reading 'rowIndex')
    at createRemoveButton (JavaScript.js:63:24)
    at JavaScript.js:54:26
    at Array.forEach (<anonymous>)
    at showTaskList (JavaScript.js:36:9)
    at addData (JavaScript.js:19:3)
    at HTMLButtonElement.<anonymous> (JavaScript.js:81:3)

該当のソースコード

html
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Todoリスト</title>
8</head>
9<body>
10  <h1>Todoリスト</h1>
11  <p>
12    <input type="radio" name="status" value="1" checked="checked">全て
13    <input type="radio" name="status" value="2">作業中
14    <input type="radio" name="status" value="3">完了
15    </p>
16
17    <table>
18      <thead>
19        <th>ID</th>
20        <th>コメント</th>
21        <th>状態</th>
22        <th></th>
23      </thead>
24      <tbody id="todo_lists"></tbody>
25    </table>
26
27    <h2>新規タスクの追加</h2>
28    <input id="add_task" type="text"/>
29    <button id="add_button" type="button">追加</button>
30  <script src="JavaScript.js"></script>
31</body>
32</html>

Javascript
1
2'use strict'
3// 必要なDOM要素を取得。
4const addButton = document.getElementById('add_button') //htmlから追加ボタンの値を取得
5const addTask = document.getElementById('add_task') //htmlから入力したタスクの値の取得
6const todoLists = document.getElementById('todo_lists') //htmlからリストの値の取得
7
8// デフォルト値で1を設定
9let id = 1
10
11// todoを保存する箱
12const tasks = []
13
14//配列にオブジェクトとしてデータを追加する
15const addData = () => {
16  tasks.push({
17    id: id,
18    title: addTask.value,
19  })
20  showTaskList(tasks)
21  addTask.value = ''
22  id++
23}
24
25const createStatusButton = () => {
26  const status = document.createElement('td')
27  const statusButton = document.createElement('button')
28  statusButton.innerText = '作業中'
29  status.appendChild(statusButton)
30  return status;
31}
32
33const createRemoveButton = () => {
34  const remove = document.createElement('td')
35  const removeButton = document.createElement('button')
36  removeButton.innerText = '削除'
37  remove.appendChild(removeButton)
38  return remove;
39}
40
41
42//タグを追加して出力する関数
43const showTaskList = () => {
44  todoLists.innerHTML = '';
45  tasks.forEach((task, index) => {
46    const todoItem = document.createElement('tr')
47    const todoId = document.createElement('td')
48    const todoTitle = document.createElement('td')
49  
50    todoTitle.innerHTML = task.title
51    todoId.innerHTML = index+1
52  
53    todoLists.appendChild(todoItem)
54    todoItem.appendChild(todoId)
55    todoItem.appendChild(todoTitle)
56  
57    const statusButton = createStatusButton()
58    todoItem.appendChild(statusButton)
59    todoItem.appendChild(statusButton)
60  
61    const removeButton = createRemoveButton()
62    todoItem.appendChild(removeButton)
63    todoItem.appendChild(removeButton)
64  })
65}
66
67//追加ボタンをクリック
68addButton.addEventListener('click', () => {
69  const task = addTask.value
70  addData(task)
71})

試したこと

他の方のコードを拝見し、下記のようなコードも試しましたが
const createRemoveButton = () => {　～～～
の中に入れるのかもよくわからず・・・

const createRemoveButton = (todoItem) => {
var index = todoItem.rowIndex - 1;
const remove = document.createElement('td')
const removeButton = document.createElement('button')
removeButton.innerText = '削除'
remove.appendChild(removeButton(todoItem))
removeButton.addEventListener('click', () => {
tasks.splice(index, 1);
showTaskList();
});
return remove;
};

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

ここにより詳細な情報を記載してください。

Cocode

2022/10/29 07:40

第三者が再現可能なコードをご提供いただけましたら幸いです。 HTMLもJSも、質問者様が現在できていることを再現できる最低限のコードをご提示いただきたいです。（今あるJSをコピペするだけではエラーになり再現できない）このコメント欄にはでなく、質問を編集してコードを追加してください。お手数をおかけしますがよろしくお願いいたします。

kumamuu

2022/10/29 08:33

ご指摘ありがとうございます。コードを追加いたしましたのでご確認いただけますと幸いです。

Cocode

2022/10/29 09:12

ありがとうございますー！

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

回答1件

処理方法

追加ボタン押下によってhtmlに<tr>を生成する際に、id名を付与する。
- 例 <tr id="taks-1">
削除ボタン押下で、押したボタンの親<tr>を取得する。
- その<tr>をHTMLから削除。
- その<tr>のid名の数字の部分のみ取得（例 1）。
- 配列tasksの中のid: 1のオブジェクトが、配列の何番目にあるかインデックス番号を調べる。
- そのインデックス番号を使って、配列tasksから対象のタスクを削除。

コード（変更部分のみ抜粋）

動作確認用サンプル：https://jsfiddle.net/qs24r51c/

javascript
1/* ----- 省略 ----- */
2
3// 配列から対象のタスクを削除、HTMLからも要素を削除する関数
4const removeTask = event => {
5  const targetTr = event.target.closest('tr') // 押した削除ボタンの親<tr>を取得
6  const targetId = targetTr.id.replace(/task-/, '') // その<tr>のid名の数字の部分のみ取得
7  const taskIndex = tasks.findIndex(task => task.id == targetId) // 対象のタスクがの配列の何番目にあるかインデックス番号を取得
8
9  tasks.splice(taskIndex, 1) // 配列から削除
10  targetTr.remove() // htmlから要素を削除
11}
12
13/* ----- 省略 ----- */
14
15const createRemoveButton = () => {
16  const remove = document.createElement('td')
17  const removeButton = document.createElement('button')
18  removeButton.innerText = '削除'
19  remove.appendChild(removeButton)
20  removeButton.addEventListener('click', removeTask, false) // イベんストリスナー設定
21  return remove;
22}
23
24/* ----- 省略 ----- */
25
26//タグを追加して出力する関数
27const showTaskList = () => {
28  todoLists.innerHTML = '';
29  tasks.forEach(task => {
30    const todoItem = document.createElement('tr')
31    const todoId = document.createElement('td')
32    const todoTitle = document.createElement('td')
33
34    // <tr>にidをつける（例 #task-1）
35    todoItem.id = `task-${task.id}`
36
37    todoTitle.innerHTML = task.title
38
39    // idがオブジェクトの中にあるので使いましょう。でないと削除したあと、実際のidとHTMLに表示されるidがずれてしまいます。
40    todoId.innerHTML = task.id
41
42    todoLists.appendChild(todoItem)
43    todoItem.appendChild(todoId)
44    todoItem.appendChild(todoTitle)
45
46    const statusButton = createStatusButton()
47    todoItem.appendChild(statusButton)
48    todoItem.appendChild(statusButton)
49
50    const removeButton = createRemoveButton()
51    todoItem.appendChild(removeButton)
52    todoItem.appendChild(removeButton)
53  })
54}
55
56/* ----- 省略 ----- */