scriptに関して

質問

scriptで下記のようにcheckboxと削除ボタンを作りました。
checkをした行を削除ボタンで削除をしたいのですが、
今のソースの状態では、checkboxを押した瞬間に行が消えます。
どこの書き方がいけないのでしょうか？
<scriptソース>
function AddTableRows1(){

var table1 = document.getElementById("table1");
var row1 = table1.insertRow(table1.rows.length);
var cell1 = row1.insertCell(0);
var cell2 = row1.insertCell(1);
var cell3 = row1.insertCell(2);
cell1.setAttribute("class","name");
cell2.setAttribute("class","naiyo");
cell3.setAttribute("class","zyoukyou");
var HTML1 = '<input type="checkbox" onclick="remove_row(this)"><input name="gyoumuname" ID="gyoumuname"　type="text" ><input type="hidden" name="gyoumuno" Id="gyoumuno"　value="0">';
var HTML2 = '<textarea name="gyoumunaiyo" ID="gyoumunaiyo" Style="width:50em;height:5em"></textarea>';
var HTML3 = '<input name="gyoumuzyoukyou" ID="gyoumuzyoukyou"　>';
cell1.innerHTML = HTML1;
cell2.innerHTML = HTML2;
cell3.innerHTML = HTML3;
}
function remove_row(o){
var TR = o.parentNode.parentNode;
TR.parentNode.deleteRow(TR.sectionRowIndex);
}
<ボタンソース>
<input class="btn1" type="button" value="削除" onclick="remove_row(this)">

回答No.1

Ogre7077 · ベストアンサー

<input type=checkbox> に onclick は不要

関数 remove_row に必要な以下の処理が不足
* 表 table1 内の全ての行を取り出す
* 行内の checkbox が checked となっている対象行のみを抽出
* 対象の行のみ繰り返しで削除処理実行

関数 remove_row の引数は this ではなく "table1" が適切

おまけに
要素の属性 id が同じ値で複数存在するのは大変よろしくない。
解決案として以下のどちらかをオススメします
* class と name だけで処理する
* id=gyoumuname_1 などと数値を振る