回答編集履歴
6
テキスト修正
answer
CHANGED
|
@@ -65,10 +65,10 @@
|
|
|
65
65
|
以上、参考になれば幸いです。
|
|
66
66
|
|
|
67
67
|
### 備考
|
|
68
|
-
上記の回答に書いた、
|
|
68
|
+
上記の回答に書いた、修正点(1) の
|
|
69
69
|
|
|
70
70
|
|
|
71
|
-
B: 行の追加、削除の影響を受けない、上位階層の要素にクリックハンドラを設定して、event.target が削除ボタンだったときに、行削除を行うようにする。
|
|
71
|
+
- B: 行の追加、削除の影響を受けない、上位階層の要素にクリックハンドラを設定して、event.target が削除ボタンだったときに、行削除を行うようにする。
|
|
72
72
|
|
|
73
73
|
|
|
74
|
-
|
|
74
|
+
については、shinji709さんが分かり易いご回答を書かれていますので、そちらを参考にされてください。
|
5
テキスト修正
answer
CHANGED
|
@@ -13,12 +13,15 @@
|
|
|
13
13
|
|
|
14
14
|
です。これらに沿って修正点としては、以下の２点になります。
|
|
15
15
|
|
|
16
|
+
(1) 新しい行に含まれる削除ボタンクリック時の処理のための修正。これは以下の２つのいずれかが考えられます。
|
|
16
|
-
- 行が追加される時点
|
|
17
|
+
- A: 行が追加される時点のその都度、新しい行に含まれる削除ボタンのクリックハンドラを設定する。
|
|
17
|
-
-
|
|
18
|
+
- B: 行の追加、削除の影響を受けない、上位階層の要素にクリックハンドラを設定して、event.target が削除ボタンだったときに、行削除を行うようにする。
|
|
18
19
|
|
|
20
|
+
(2) 現状、`"remove"` が削除ボタンのidになっているのをclassに変更
|
|
19
21
|
|
|
20
|
-
以下は上記の修正点を反映したコード例です。削除ボタンに設定するクリックハンドラを個別の関数にしています。
|
|
21
22
|
|
|
23
|
+
以下は上記の修正点を反映したコード例です。以下では、上記の(1)については、 A のほうを採用して、削除ボタンに設定するクリックハンドラを個別の関数にしています。
|
|
24
|
+
|
|
22
25
|
```html
|
|
23
26
|
<input type="button" value="削除" class="remove">
|
|
24
27
|
```
|
|
@@ -59,4 +62,13 @@
|
|
|
59
62
|
- `let` にする必要のない変数は `const`にしています。
|
|
60
63
|
- 追加された行の左端の`<td>`に追加行番号を入れる。（※これは、削除ボタンがクリックされたときに、そのボタンを含む行が削除されるのを、目視で確認できるようにするためです）
|
|
61
64
|
|
|
62
|
-
以上、参考になれば幸いです。
|
|
65
|
+
以上、参考になれば幸いです。
|
|
66
|
+
|
|
67
|
+
### 備考
|
|
68
|
+
上記の回答に書いた、
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
B: 行の追加、削除の影響を受けない、上位階層の要素にクリックハンドラを設定して、event.target が削除ボタンだったときに、行削除を行うようにする。
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
という方については、shinji709さんが分かり易い回答を書かれていますので、そちらを参考にされてください。
|
4
テキスト修正
answer
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
です。これらに沿って修正点としては、以下の２点になります。
|
|
15
15
|
|
|
16
|
-
- 行が追加される時点で、その新しい行に含まれる削除ボタン
|
|
16
|
+
- 行が追加される時点で、その新しい行に含まれる削除ボタンのクリックハンドラを設定
|
|
17
17
|
- 現状、`"remove"` が削除ボタンのidになっているのをclassに変更
|
|
18
18
|
|
|
19
19
|
|
3
テキスト修正
answer
CHANGED
|
@@ -57,6 +57,6 @@
|
|
|
57
57
|
なお、上記では、補足として以下の２点も修正、追加しています。
|
|
58
58
|
|
|
59
59
|
- `let` にする必要のない変数は `const`にしています。
|
|
60
|
-
- 追加された行の左端のtdに追加行番号を入れる。
|
|
60
|
+
- 追加された行の左端の`<td>`に追加行番号を入れる。（※これは、削除ボタンがクリックされたときに、そのボタンを含む行が削除されるのを、目視で確認できるようにするためです）
|
|
61
61
|
|
|
62
62
|
以上、参考になれば幸いです。
|
2
テキスト修正
answer
CHANGED
|
@@ -13,11 +13,10 @@
|
|
|
13
13
|
|
|
14
14
|
です。これらに沿って修正点としては、以下の２点になります。
|
|
15
15
|
|
|
16
|
-
- 行が追加され
|
|
16
|
+
- 行が追加される時点で、その新しい行に含まれる削除ボタンへのクリックハンドラを設定
|
|
17
|
+
- 現状、`"remove"` が削除ボタンのidになっているのをclassに変更
|
|
17
18
|
|
|
18
|
-
- 現状、`"remove"` が削除ボタンのidになっているのをclassに修正
|
|
19
19
|
|
|
20
|
-
|
|
21
20
|
以下は上記の修正点を反映したコード例です。削除ボタンに設定するクリックハンドラを個別の関数にしています。
|
|
22
21
|
|
|
23
22
|
```html
|
1
テキスト修正
answer
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
こんにちは
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
ご質問に挙げられているコードを、意図した動作をするものに修正するあたって留意すべき点は、[cloneNodeの説明](https://developer.mozilla.org/ja/docs/Web/API/Node/cloneNode)に書かれている、以下の２点、
|
|
4
|
+
ご質問に挙げられているコードを、意図した動作をするものに修正するにあたって留意すべき点は、[cloneNodeの説明](https://developer.mozilla.org/ja/docs/Web/API/Node/cloneNode)に書かれている、以下の２点、
|
|
5
5
|
|
|
6
6
|
> 注記
|
|
7
7
|
ノードを複製すると、そのノードのすべての属性とその値がコピーされます。つまり、HTML属性のイベントを含みます。addEventListener() を使用したものや、要素のプロパティに代入されたもの (例: node.onclick = fn;) は複製されません。
|