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

追加したTaskを削除ボタンを押したら、
新たにタスクを追加すると番号が連番となっているように
実装したいのですが、思った通りの動作ができません。
色々調べて実装したのですが、これ以上積んでわからない状態です。
何方かアドバイスをお願いします。

現在の状況

1,2,3,4,5の連番があったとして5を削除すると次の番号は6からになり、1,2,3,4,6となる。

期待する動作

削除後、新たにタスクを追加すると番号が連番となっている。
1,2,3,4,5の連番があったとして4を削除すると次の番号は4からになり、1,2,3,4となるようにしたいです。

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

main.js
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(taskId);
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}
70

yambejp

2021/08/06 02:14

1,2,3で2を削除すると3が２に変更になるということですか？本来IDというのはそういうものじゃないですけど・・・

edu

2021/08/06 02:19

yambejpさん、アドバイスありがとうございます。1,2,3で2を削除すると3が２に変更になるということです。IDの所の表記を番号に変えました。

yambejp

2021/08/06 02:23

tbodyが複数あるようですがそういう仕様ですか？

edu

2021/08/06 02:45

yambejpさん、仕様は特に決まりはないです。 htmlのソースコードは、下記を参考にしています。 [簡素なtodoリストをjavascriptで作る] (https://qiita.com/takeshi_104/items/3138195ba0c58e37b1c3)

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

回答2件

グローバル変数idの役割は taskId の生成用だけにして、連番表示は id を使わずにやるのはいかがでしょう。

例として、連番表示をCSSに完全に任せる方法を書きます。

js
1  const cloumns = [id, comment, workButton, deleteButton]

ここの id を空文字列 '' に変更する。

以下のスタイルシートを追加する:

css
1:root {
2  counter-reset: task;
3}
4
5#list td:nth-of-type(1):before {
6  counter-increment: task;
7  content: counter(task);
8}

投稿2021/08/06 02:40

編集2021/08/06 02:55

int32_t

総合スコア21695

edu

2021/08/06 06:04

int32_tさん、アドバイス、ありがとうございます！『例として、連番表示をCSSに完全に任せる方法を書きます。』の方法、初めてみました！また、アドバイスをお願いします！

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

ベストアンサー

※ダメな回答

javascript
1const deleteTask = (taskId) => {
2  const task = document.getElementById(taskId);
3  const tbody=task.closest('tbody');
4  task.remove();
5  tbody.querySelectorAll('tr').forEach((x,y)=>{
6    x.setAttribute('id',`id-${y+1}`);
7    x.querySelector('td').textContent=y+1;
8  });
9  id--;
10}

修正版

javascript
1'use strict';
2{
3const newtask = document.getElementById('newtask');
4const add = document.getElementById('add');
5const deleteTask = (btn) => {
6  const task = btn.closest('tr');
7  const tbody=task.closest('tbody');
8  task.remove();
9  tbody.querySelectorAll('tr').forEach((x,y)=>{
10    x.setAttribute('id',`id-${y+1}`);
11    x.querySelector('td').textContent=y+1;
12  });
13  id--;
14}
15let id = 0;
16
17add.addEventListener('click',() => {
18  if(newtask.value =='') {
19    return
20  }
21  id += 1;
22  const list = document.getElementById('list')
23  const tr = document.createElement('tr')
24
25  const taskId = `task-${id}`
26  tr.id = taskId
27  const comment = newtask.value;
28
29  const workButton = document.createElement('button');
30  workButton.innerHTML = '作業中';
31
32  const deleteButton = document.createElement('button');
33  deleteButton.innerHTML = '削除';
34
35  deleteButton.addEventListener('click', () => deleteTask(deleteButton));
36  const cloumns = [id, comment, workButton, deleteButton]
37
38  cloumns.forEach((cloumn) => {
39  const td = document.createElement('td');
40
41  if (cloumn instanceof HTMLElement) {
42      td.appendChild(cloumn)
43  } else {
44    td.innerText = cloumn;
45  }
46    tr.appendChild(td);
47
48  })
49  list.appendChild(tr);
50  newtask.value = '' 
51})
52   }