javascriptで行と列の複製と削除

javascriptでエクセルみたいなユーザーが打ち込める行列を作成しています。
1行目で右端に追加ボタンで行を生成、各行の右端のセルで自身の行を削除というような機能を持たせたくて以下のようなプログラムにしましたが追加は動きますが、最初の行しかできません。
考えとしては、複成した行は、削除できない事から複成が上手くいっていないのかなと思いますが、解決策がわかりません。どうぞよろしくお願いします。

（html）

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> </head> <body> <table border="1"> <thead> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td><input type="button" value="追加" id="add"></td> </td> </tr> </thead> <tbody contenteditable="true" id="addlist"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <input type="button" value="削除" id="remove"> </td> </tr> </tbody> </table> <script src="js/test.js"></script> </body> </html>

(javascript)

'use strict'

let add = document.getElementById("add");

add.addEventListener("click", function(){

let tbody = document.getElementById("addlist");

let tr = tbody.firstElementChild.cloneNode("true");

tbody.insertBefore(tr, tbody.lastChild)

})

let remove = document.getElementById("remove");

remove.addEventListener("click", function(){

let tbody = document.getElementById("addlist");

let tr = remove.parentNode.parentNode;

tbody.removeChild(tr);

})

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

回答2件

ベストアンサー

複製した行の削除ボタンに削除用のイベントハンドラが設定されていないからです。
追加するたびに毎回ハンドラを設定してもいいですが、こういう場合、要素を先祖方向に遡って、追加や削除されない不動の要素（tbodyやtable、bodyなど）にイベントを設定するとよいと思います。（イベントデリゲーション）

具体的には以下の部分を…

JavaScript
1let remove = document.getElementById("remove");
2
3remove.addEventListener("click", function() {
4  let tbody = document.getElementById("addlist");
5  let tr = remove.parentNode.parentNode;
6  tbody.removeChild(tr);
7});

以下のコードに書き換えれば動きます。

JavaScript
1addlist.addEventListener("click", function() {
2  if (event.target.id === 'remove') {
3    let tr = event.target.parentNode.parentNode;
4    this.removeChild(tr);    
5  }
6});

本来複数の要素が同じidを持つのは良くないので、そこは今後見直したほうがよいと思います。

投稿2019/11/23 02:10

shinji709

総合スコア805

HO.

2019/11/23 02:34

めちゃめちゃすっきりとしたコードとと解説をありがとうございます。また本来複数の要素が同じidを持つのは良くないので、そこは今後見直したほうがよいと思います。気を付けます。ありがとうございました！

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

こんにちは

ご質問に挙げられているコードを、意図した動作をするものに修正するにあたって留意すべき点は、cloneNodeの説明に書かれている、以下の２点、

注記

ノードを複製すると、そのノードのすべての属性とその値がコピーされます。つまり、HTML属性のイベントを含みます。addEventListener() を使用したものや、要素のプロパティに代入されたもの (例: node.onclick = fn;) は複製されません。

と、

注意: cloneNode() を使用すると、ドキュメント内で要素の id が重複する可能性があります。

です。これらに沿って修正点としては、以下の２点になります。

(1) 新しい行に含まれる削除ボタンクリック時の処理のための修正。これは以下の２つのいずれかが考えられます。

A: 行が追加される時点のその都度、新しい行に含まれる削除ボタンのクリックハンドラを設定する。
B: 行の追加、削除の影響を受けない、上位階層の要素にクリックハンドラを設定して、event.target が削除ボタンだったときに、行削除を行うようにする。

(2) 現状、"remove" が削除ボタンのidになっているのをclassに変更

以下は上記の修正点を反映したコード例です。以下では、上記の(1)については、 A のほうを採用して、削除ボタンに設定するクリックハンドラを個別の関数にしています。

html
1<input type="button" value="削除" class="remove">

javascript
1document.addEventListener('DOMContentLoaded', function() {
2
3  let addCount = 0; // 追加行カウンタ
4  
5  function removeRow(event) {
6    const tr = event.target.parentNode.parentNode;    
7    const tbody = document.getElementById("addlist");
8    tbody.removeChild(tr);
9  }
10  
11  const add = document.getElementById("add");
12
13  add.addEventListener("click", function() {
14    const tbody = document.getElementById("addlist");
15    const tr = tbody.firstElementChild.cloneNode(true);
16    tbody.insertBefore(tr, tbody.lastChild);
17        
18    const remove = tr.querySelector(".remove");
19    remove.addEventListener("click", removeRow);
20    
21    // 追加された行の左端のtdに追加行番号を入れる。
22    tr.querySelector("td").textContent = ++addCount;
23  })
24
25  const remove = document.querySelector(".remove");
26  remove.addEventListener("click", removeRow);
27
28});