teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

修正版

2021/08/06 03:09

投稿

yambejp
yambejp

スコア117906

answer CHANGED
@@ -1,3 +1,4 @@
1
+ ※ダメな回答
1
2
  ```javascript
2
3
  const deleteTask = (taskId) => {
3
4
  const task = document.getElementById(taskId);
@@ -10,4 +11,58 @@
10
11
  id--;
11
12
  }
12
13
  ```
14
+ # 修正版
15
+ ```javascript
16
+ 'use strict';
17
+ {
18
+ const newtask = document.getElementById('newtask');
19
+ const add = document.getElementById('add');
20
+ const deleteTask = (btn) => {
21
+ const task = btn.closest('tr');
22
+ const tbody=task.closest('tbody');
23
+ task.remove();
24
+ tbody.querySelectorAll('tr').forEach((x,y)=>{
25
+ x.setAttribute('id',`id-${y+1}`);
26
+ x.querySelector('td').textContent=y+1;
27
+ });
28
+ id--;
29
+ }
30
+ let id = 0;
31
+
32
+ add.addEventListener('click',() => {
33
+ if(newtask.value =='') {
34
+ return
35
+ }
36
+ id += 1;
37
+ const list = document.getElementById('list')
38
+ const tr = document.createElement('tr')
39
+
40
+ const taskId = `task-${id}`
41
+ tr.id = taskId
42
+ const comment = newtask.value;
43
+
44
+ const workButton = document.createElement('button');
45
+ workButton.innerHTML = '作業中';
46
+
47
+ const deleteButton = document.createElement('button');
48
+ deleteButton.innerHTML = '削除';
49
+
50
+ deleteButton.addEventListener('click', () => deleteTask(deleteButton));
51
+ const cloumns = [id, comment, workButton, deleteButton]
52
+
53
+ cloumns.forEach((cloumn) => {
54
+ const td = document.createElement('td');
55
+
56
+ if (cloumn instanceof HTMLElement) {
57
+ td.appendChild(cloumn)
58
+ } else {
59
+ td.innerText = cloumn;
60
+ }
61
+ tr.appendChild(td);
62
+
13
- 調整
63
+ })
64
+ list.appendChild(tr);
65
+ newtask.value = ''
66
+ })
67
+ }
68
+ ```

1

調整

2021/08/06 03:09

投稿

yambejp
yambejp

スコア117906

answer CHANGED
@@ -1,12 +1,13 @@
1
1
  ```javascript
2
2
  const deleteTask = (taskId) => {
3
3
  const task = document.getElementById(taskId);
4
- const ids=[...task.closest('tbody').querySelectorAll('tr')].filter(x=>x!==task);
4
+ const tbody=task.closest('tbody');
5
5
  task.remove();
6
- ids.forEach((x,y)=>{
6
+ tbody.querySelectorAll('tr').forEach((x,y)=>{
7
7
  x.setAttribute('id',`id-${y+1}`);
8
8
  x.querySelector('td').textContent=y+1;
9
9
  });
10
10
  id--;
11
11
  }
12
- ```
12
+ ```
13
+ 調整