HTML要素の削除

要素を削除しようと思って・・・ - Shammerismの続き。JavaScript の removeChild を使用することで可能。また、各要素には parentNode という属性があり、これを参照することで削除範囲も指定できる。以下、使用例。

    <form name="serverForm" action="http://www.me.local/post" method="POST">
      <table border="1">
	<tbody id="id1">
	  <tr><th>Check</th><th>Key</th><th>Value</th></tr>
	  <tr><th></th><th>Field0</th><td><input type="text" name="field0"></input></td></tr>
	  <tr id="tr1"><th><input type="checkbox" name="targetitems"></input><td>Field1</td><td><input type="text" name="field1"></input></td></tr>
	  <tr id="tr2"><th><input type="checkbox" name="targetitems"></input><td>Field2</td><td><input type="text" name="field2"></input></td></tr>
	  <tr id="tr3"><th><input type="checkbox" name="targetitems"></input><td>Field3</td><td><input type="text" name="field3"></input></td></tr>
	  <tr id="tr4"><th><input type="checkbox" name="targetitems"></input><td>Field4</td><td><input type="text" name="field4"></input></td></tr>
	  <tr id="tr5"><th><input type="checkbox" name="targetitems"></input><td>Field5</td><td><input type="text" name="field5"></input></td></tr>
	</tbody>
      </table>
    </form>      
    <script type="text/javascript">
function del(){
    var selectedItems = document.getElementsByName("targetitems");
    for( i = 0 ; i < selectedItems.length ; i++ ){
        if( selectedItems[i].checked ){
            var removeID = selectedItems[i].parentNode.parentNode.id;
            var removeElement = document.getElementById(removeID);
            removeElement.parentNode.removeChild(removeElement);
        }
    }
}
    </script>
    <button onclick="del();">Remove</button>

checkbox の checked が true か false か(チェックされているかいないか)で削除判定をする。チェックされた削除対象だったら、checkbox の親要素(td)の親要素(tr)の id を取得して、tr 要素を断定、その後、tr の親要素の removeChild で対象の tr 要素を指定する。これで対象の行を削除できる。

でも、自分が想定しているのは、

1. 最初は最小限のフォームを用意しておく
2. フォームが足りない場合は JavaScript でフォームを追加
3. 不要なフォームを間違えて追加してしまった場合は上記 JavaScript で不要要素削除

というページ。フォームを追加する際に id や name 属性に数字の連番を使用して追加したいと思っているが、1 から 5 まで登録されて 3 が削除されたときに 3 の存在をチェック、とかやるのは面倒。なので、チェックボックスを使用しないで、単に追加ボタンと削除ボタンがあればいいのかもしれない。そうすれば、追加の際にはインデックスを増加させてフォーム追加、削除の時は一番最後のインデックスを削除し、インデックスを減算、とシンプルな処理でよくなる。上記の例は上記の例で使うことがあるかもしれないが、チェックボックスなしで最後のフォームを追加、削除できるような実装を考えないといけなそうだ。