getElementsByTagName parentNode.removeChild

質問

再び同じような質問ですが
document.getElementsByTagNameもparentNode.removeChildも、よく使い方がわからずコードを書いています。

下記コードで「消す」を実行させても、半分ずつしか削除されません。
12個から6個、次に3個という具合です。

一度に全部（"input"のみ）削除するには、どうしたらよろしいでしょうか？

<script type="text/javascript">
var gg=[];
function d() {
elements = document.getElementsByTagName("input");
alert(elements.length + "個の要素が見つかりました")
}

function del() {
gg = document.getElementsByTagName("input");

for(i=0;i<gg.length;i++)
　 gg[i].parentNode.removeChild(gg[i]);
}
</script>

<input name="test" type="text"><br>
<input name="test" type="text"><br>
<input name="test" type="text"><br>
<input name="test" type="text"><br>
<input name="test" type="text"><br>
<input name="test" type="text"><br>
<input name="test" type="text"><br>
<input name="test" type="text"><br>
<input name="test" type="text"><br>
<input name="test" type="text"><br>
<input name="test" type="text"><br>
<input name="test" type="text"><br>
<br>

<button onclick="d()">個数</button>
<button onclick="del()">消す</button>

回答No.2

yambejp · ベストアンサー

for(i=0;i<gg.length;i++)
ちょっと考えればわかると思いますが・・・
gg[0]をremoveすると、今までgg[1]だったオブジェクトがgg[0]に
格上げされます。
なのでループでgg[1]を削除するとそれはそれまでgg[2]だったものです
その流れでひとつ置きに削除されていくわけです。

なので、この手の処理はけつから消していきます。
for(i=gg.length-1;i>=0;i--){
　 gg[0].parentNode.removeChild(gg[i]);
}

ちなみにbuttonタグはサブミットをかねる場合がありますので
むやみに使わないほうがいいでしょう。
やるならtype=buttonを使うか、きちんとreturn falseをすることです。

お礼

ありがとうございました。

補足

redfox63さんへの補足内容と同じですが、

parentNode.removeChildの使い方はこれで正しいですか？

回答No.5

noname#84373

No.4です
それは忘れてください。はずかしい。
var o; while(o=document.getElementsByTagName("input")[0])
o.parentNode.removeChild(o);
;
だと動くと思うけど効率が悪いかも・・・。
ということで、なかったことに！

お礼

ありがとうございました。

回答No.4

noname#84373

while(gg[0])gg[0].parentNode.removeChild(gg[0]);

回答No.3

yambejp

>parentNode.removeChildの使い方はこれで正しいですか？

自オブジェクトをけすのは親ノードからなのであってますよ

お礼

ありがとございます。
はじめてのHTMLで、いろんなサイトからの「コピペ」で意味も理解できずやってます。
今後もよろしくお願いします。

回答No.1

redfox63

for文でやるなら
for ( i = 0; gg.length; ) {
　　gg[i].parentNode.removeChild(gg[i]);
}
といった具合にしましょう

i++などと更新処理をしてしまうと
初回は gg[0]を消しますが
2回目の i=1になった時点では元のgg[1]ではなく gg[2]を消そうとします

どうしても for文のループ変数更新をしたいのであれば コレクションを後ろから実行しましょう
for ( i = gg.length - 1; i > -1; i-- ) {
　　gg[i].parentNode.removeChild(gg[i]);
}
といった具合です

関数d を
function d() {
elements = document.getElementsByTagName("input");
for( i = 0; i < elements.length; i++ ) {
elements[i].value = i;
}
alert(elements.length + "個の要素が見つかりました")
}
といった具合にしてみると関数Delのどの部分がおかしいのかわかると思いますよ

お礼

ありがとうございました。

補足

ありがとうございます。
そうだったんですか。
なんと、恥ずかしいです。

ちなみに、parentNode.removeChildの使い方はこれで正しいですか？