JavaScriptでTodoリストの追加したタスクを削除機能が実装できない。

avaScriptでTodoリストを作成しています。

新規追加したタスクの削除ボタンを押したら、
1度目はタスクが消えるのですが、
再度、新規タスクを作成し、追加ボタンを押したら、
新規のタスクは出てこず、検索ツールに下記のエラー表示が出ます。

『検索ツールエラー文』
main.js:66 Uncaught TypeError: Cannot read property 'appendChild' of null
at HTMLButtonElement. (main.js:66)

恐れ入りますが、エラーの解決方法を教えてください。
実装したいのですが、思った通りの動作ができません。
色々調べて実装したのですが、これ以上積んでわからない状態です。
何方かアドバイスをお願いします。

期待する動作

①2回目に作成したTASKの削除ボタン押下時にそのタスクを削除できる。
②2回目に作成したタスク削除時はIDが振り直される
③削除後、新たにタスクを追加するとIDが連番となっている

indexhtml
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>課題③</title>
9</head>
10<body>
11    <h1>TODOリスト</h1>
12    
13    <p class="radio">
14      <input type="radio" id="r1" name="list" value="1" checked><label for="r1">全て</label>
15      <input type="radio" id="r2" name="list" value="2"><label for="r2">作業中</label>
16      <input type="radio" id="r3" name="list" value="3"><label for="r3">完了</label>
17    </p>
18
19<table>
20  <thead>
21    <tr>
22      <th>ID</th>
23      <th>コメント</th>
24      <th>状態</th>
25    </tr>
26  </thead>
27    <tr>
28      <td></td>
29      <!-- <td>0</td>
30      <td>test</td>
31      <td><button>作業中</button></td>
32      <td><button>削除</button></td> -->
33    </tr>
34    <tbody id="list"></tbody>
35</table>
36  
37    
38    <h2>新規タスクの追加</h2>
39    <input type="text" id="newtask"/>
40    <button id="add">追加</button>
41
42    <script src="main.js"></script>
43</body>
44</html>

mainjs
1'use strict';
2{
3//inputタグを取得して変数に入れる
4const newtask = document.getElementById('newtask');
5
6// 入力された値をリストに追加する
7const add = document.getElementById('add');
8//削除ボタンを押したときに何かの処理を実行したい
9//次にdeleteTask関数を作成し、deleteTaskの引数には削除したいタスクのIDを渡します
10//remove関数を呼び出してタスク(テーブルの一行の要素)を削除します
11const deleteTask = (taskId) => {
12 const task = document.getElementById('list');
13 task.remove();
14}
15//idの変数を用意
16let id = 0;
17
18add.addEventListener('click',() => {
19  if(newtask.value =='') {
20    return
21  }
22  id += 1;
23
24  // olタグを取得して変数に入れる
25  const list = document.getElementById('list')
26  const tr = document.createElement('tr')
27
28  const taskId = `task-${id}`
29  tr.id = taskId
30  //const id = list.children.length + 1;
31  const comment = newtask.value;
32
33  // 分かりやすい変数名をつけます
34  const workButton = document.createElement('button');
35  workButton.innerHTML = '作業中';
36
37  const deleteButton = document.createElement('button');
38  deleteButton.innerHTML = '削除';
39
40  //削除ボタンが押されたときにタスクを削除したいので
41//deleteButtonがクリックされたときにdeleteTaskを呼び出す
42
43  deleteButton.addEventListener('click', () => deleteTask(taskId));
44  // テーブルの行に必要なデータの配列を作成します
45  const cloumns = [id, comment, workButton, deleteButton]
46
47  //　テーブルの行を作成します
48  // const tr = document.createElement('tr');
49
50  // 配列の中身を一つずつ取り出して処理をします
51  cloumns.forEach((cloumn) => {
52  // テーブルの列を作成します
53  const td = document.createElement('td');
54
55  // HTMLタグ処理を変更
56  if (cloumn instanceof HTMLElement) {
57      td.appendChild(cloumn)
58  } else {
59    td.innerText = cloumn;
60  }
61  // 行に列を追加します
62    tr.appendChild(td);
63  
64  })
65  //テーブルに行を追加
66  list.appendChild(tr);
67  newtask.value = '' 
68})
69}

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

回答2件

ベストアンサー

js
1const deleteTask = (taskId) => {
2 const task = document.getElementById('list');
3 task.remove();
4}

ここで <tbody id="list"> を消しているので、以降は追加ボタンの処理ができなくなりますね。

getElementById() の引数は taskId では。

投稿2021/08/03 00:51

int32_t

総合スコア21012

新規タスクを<tbody id="list">に追加していると思いますが、タスクを削除したときに<tbody id="list">も削除されてしまっているので2回目追加するときに追加するところがないためエラーになっているようです。

投稿2021/08/03 00:43

agumon

総合スコア271

edu

2021/08/03 01:20

int32_tさん、アドバイスありがとうございます！ご指摘頂いたソースコードの件ですが、 const deleteTask = (taskId) => { const task = document.getElementById('taskId'); task.remove(); } にすると『Uncaught TypeError: Cannot read property 'remove' of null at deleteTask (main.js:13) at HTMLButtonElement.<anonymous> (main.js:43) deleteTask @ main.js:13 (anonymous) @ main.js:43』というエラー文が表示されたので、　listを入れてみました。