teratail
回答率
85.30%
質問するログイン新規登録
トップJavaScriptに関する質問JavaScript 要素の削除

編集履歴

回答編集履歴

3

JSFiddleを追記しました☆

2018/10/28 03:10

投稿

退会済みユーザー
answer CHANGED
@@ -1,4 +1,5 @@
1
1
  まるっと書き直してみました。
2
+ [JSFiddle](https://jsfiddle.net/btsy5fLw/3/)
2
3
 
3
4
  ```javascript
4
5
  // 与えられた要素番号をIDに変換します

2

冗長な処理を加えてしまっていたのを削除しました☆☆

2018/10/28 03:10

投稿

退会済みユーザー
answer CHANGED
@@ -16,18 +16,17 @@
16
16
  var removeTrs = document
17
17
  .querySelectorAll('table')[1]
18
18
  .querySelectorAll('tr');
19
- removeTrs.forEach((tr, index) => tr.id = indexToRemoveTrID(index));
19
+ removeTrs.forEach((tr, index) => tr.id = indexToRemoveTrID(index));
20
20
  }
21
21
 
22
- // 削除ボタンのクリックイベントハンドラーを再セットします
22
+ // 削除ボタンのクリックイベントハンドラーをセットします
23
- function resetBtnOnClickEvents() {
23
+ function setBtnOnClickEvents() {
24
24
  var removeTrs = document
25
25
  .querySelectorAll('table')[1]
26
- .querySelectorAll('tr');
26
+ .querySelectorAll('tr')
27
- removeTrs.forEach((tr, index) => {
27
+ .forEach((tr, index) => {
28
- tr.removeEventListener('click', onClickEventHandler);
29
- tr.addEventListener('click', onClickEventHandler);
28
+ tr.addEventListener('click', onClickEventHandler);
30
- });
29
+ });
31
30
  }
32
31
 
33
32
  // 削除ボタンのクリックイベントハンドラー
@@ -36,10 +35,9 @@
36
35
  document.getElementById(indexToInputTrID(index)).remove();
37
36
  document.getElementById(indexToRemoveTrID(index)).remove();
38
37
  resetTrIDs();
39
- resetBtnOnClickEvents();
40
38
  }
41
39
 
42
40
  // 各要素を初期化します
43
41
  resetTrIDs();
44
- resetBtnOnClickEvents();
42
+ setBtnOnClickEvents();
45
43
  ```

1

載せたのがミスってたので修正しました★

2018/10/28 03:04

投稿

退会済みユーザー
answer CHANGED
@@ -6,11 +6,17 @@
6
6
  function indexToRemoveTrID(index) { return ('d' + index); };
7
7
 
8
8
  // IDを再セットします
9
- function resetInputTrIDs() {
9
+ function resetTrIDs() {
10
+ //
10
11
  var inputTrs = document
11
12
  .querySelectorAll('table')[0]
12
13
  .querySelectorAll('tr');
13
14
  inputTrs.forEach((tr, index) => tr.id = indexToInputTrID(index));
15
+ //
16
+ var removeTrs = document
17
+ .querySelectorAll('table')[1]
18
+ .querySelectorAll('tr');
19
+ removeTrs.forEach((tr, index) => tr.id = indexToRemoveTrID(index));
14
20
  }
15
21
 
16
22
  // 削除ボタンのクリックイベントハンドラーを再セットします
@@ -29,10 +35,11 @@
29
35
  var index = this.id.match(/\d+/)[0];
30
36
  document.getElementById(indexToInputTrID(index)).remove();
31
37
  document.getElementById(indexToRemoveTrID(index)).remove();
38
+ resetTrIDs();
32
39
  resetBtnOnClickEvents();
33
40
  }
34
41
 
35
42
  // 各要素を初期化します
36
- resetInputTrIDs();
43
+ resetTrIDs();
37
44
  resetBtnOnClickEvents();
38
45
  ```