要素を削除しようと思って・・・

JavaScript で以下のように書いてみた。要件は、チェックボックスで選択された要素を削除するというもの。以下の実装では削除のための removeChild がないけれども、、、その前段階で getElementsByName で削除対象になる要素を取得できるかな、と試そうと思ってこの状態で動作させてみた。

function remove(){
    var selectedItems = document.getElementsByName("field");
    for( i = 0 ; i < selectedItems.length ; i++ ){
        window.alert(selectedItems[i].value);
    }
}
<form name="test">
<input type="checkbox" name="field"></input>
<input type="checkbox" name="field"></input>
<button onclick="remove();">Remove</button>

これをブラウザ(Safari)で表示させ、チェックボックスをチェック、その後、Remove ボタンをクリックしたのだが、、、その Remove ボタンが消えてしまった。何が起きたのがよくわからなかったが、どうやら onclick="remove();" というのがよくなかったようだ。remove は何か内部で予約されている別の処理だったりするのかも。function 名を remove から del に変更したところ、チェックボックスの情報を取得することができた。

でも、、、表示は想定していたものと異なるものだった。よく考えると、checkbox 自体を取得してそれを直接削除しても期待しているようにはならないかも。たとえば、

<form name="test" ...>
<table><tbody>
  <tr><td><input type="checkbox" name="testcheckbox"></input></td><td>...</td></tr>
</tbody></table>
</form>

となっている場合、削除したいのは checkbox の要素だけじゃなく tr の要素ごと、ということになる。でも、removeChild しても削除対象は checkbox の要素だけ、、、ということにならないだろうか。
まだやっていないのでわからないけれども、この辺は考えないといけないかもしれない。