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

回答編集履歴

2

微修正

2020/06/22 10:59

投稿

ohys
ohys

スコア147

answer CHANGED
@@ -15,6 +15,9 @@
15
15
  //略
16
16
  tableAction.appendChild(createDeleteButton(tableRecord));
17
17
  }
18
+
19
+ //略
20
+
18
21
  const createDeleteButton = (tableRecord) => {
19
22
  var index = tableRecord.rowIndex-1;
20
23
  const deleteButton = document.createElement('button');

1

実装について追記します

2020/06/22 10:59

投稿

ohys
ohys

スコア147

answer CHANGED
@@ -4,4 +4,25 @@
4
4
 
5
5
  引数として受け取った`tableRecord`の行番号を取得して、その値をspliceの引数に与えると上手くいきます。(配列の添字が0始まりに対してrowIndexは1始まりであることに注意)
6
6
 
7
- `tableRecord`は<tr>要素であり数値じゃないので直接spliceに入れようとすると0になってしまうのだと思います(おそらく)
7
+ `tableRecord`は<tr>要素であり数値じゃないので直接spliceに入れようとすると0になってしまうのだと思います(おそらく)
8
+
9
+ -----
10
+ 実装を追記します。
11
+
12
+ ```js
13
+
14
+ const showTodos = () => {
15
+ //略
16
+ tableAction.appendChild(createDeleteButton(tableRecord));
17
+ }
18
+ const createDeleteButton = (tableRecord) => {
19
+ var index = tableRecord.rowIndex-1;
20
+ const deleteButton = document.createElement('button');
21
+ deleteButton.textContent = '削除';
22
+ deleteButton.addEventListener('click', () => {
23
+ todos.splice(index, 1);
24
+ showTodos();
25
+ });
26
+ return deleteButton;
27
+ };
28
+ ```