javascriptでリストのIDの整理

実現したいこと：
画像のように要素を削除ボタンで消した時に、ID欠番が出ないように詰めて表示させたい
（例： idが１、２、３の要素の２が削除された時に、３の要素が自動的にid２に変化する。）

試したこと：
要素が削除された時に他の要素のidを変更する処理をいろいろ試しましたが、
良いやり方が見つかりません。

ご教授いただきたいこと：
何か比較的簡単この処理ができる、methodなどがあれば教えて頂きたいです。
削除された時に他の idの変更をしていくという方法しかないのであればどのよう流れで処理を書くのか、ヒントをいただきたいです。

javascript
1'use strict';
2const taskTrigger = document.getElementById('task-trigger');
3const taskValue = document.getElementById('task-value');
4const taskTable = document.getElementById('table');
5const tasks = [];
6
7const createStatusButton = (task, status) => {
8    const statusButton = document.createElement('button');
9    statusButton.innerText = task.status;
10    status.appendChild(statusButton);
11}
12
13const createRemoveButton = remove => {
14    const removeButton = document.createElement('button');
15    removeButton.innerText = '削除';
16    remove.appendChild(removeButton);
17}
18
19
20const showTasks = () => {
21  taskTable.innerText = '';
22  tasks.forEach((task) => {
23    const taskId = taskTable.rows.length;
24    
25    const row = taskTable.insertRow(-1);
26
27  
28    const id = row.insertCell(0);
29    const comment = row.insertCell(1);
30    const status = row.insertCell(2);
31    const remove = row.insertCell(3);
32  
33    id.innerText = taskId;
34    comment.innerText = task.task;
35    createStatusButton(task, status);
36    createRemoveButton(remove);
37
38    remove.addEventListener('click',() =>{
39      taskTable.deleteRow(taskId);
40
41    })
42  });
43}
44
45
46taskTrigger.addEventListener('click', () => {
47  const task = { task: taskValue.value, status: '作業中' }
48  tasks.push(task);
49  showTasks();
50  taskValue.value = '';
51});

html
1<!DOCTYPE html>
2<html>
3 <head>
4   <meta charset="UT
5   F-8">
6   <style>
7 </style>
8</head>
9  <body>
10    <h1>ToDoリスト</h1>
11    <input type="radio" name="radio_button" value="all" checked="checked">すべて
12    <input type="radio" name="radio_button" value="work">作業中
13    <input type="radio" name="radio_button" value="finish">完了
14     
15    <table>
16      <thead>
17        <tr>
18          <th>ID</th>
19          <th>コメント</th>
20          <th>状態</th>
21        </tr>
22      </thead>
23      <tbody id="table">
24      </tbody>
25    </table>
26    
27    <h1>新規タスクの追加</h1>
28    <input id="task-value" type="text">
29    <input id="task-trigger" type="button" value="追加">
30
31    <script src="lesson2.js"></script>
32  </body>
33</html>
34
35

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

回答1件

ベストアンサー

テーブルの中身をすべて消去
配列から当該データを削除
テーブルに配列データを投入

投稿2021/10/11 04:41

yambejp

総合スコア116724

yukawa_

2021/10/11 05:59

ありがとうございます。下記のようの形で試したのですが、うまくできませんでした。何かより良い書き方などあればご教授いただきたいです。 remove.addEventListener('click',() =>{ while(taskId>0)taskTable.deleteRow(0); tasks.shift(taskId) showTasks(tasks) })

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