スポンサードリンク

JavaScriptのremoveChildを使う際の注意点

JavaScript の removeChild を使ってノードの削除をしようとしてハマったので。

そもそもは、とあるノードの子ノードを全て削除する関数を書いてたのですが、これがどうにもうまく行かなくて、新JavaScript例文辞典子ノードを全て削除する (removeChild) にあった関数を使ったら、上手く動いたんです。

というわけで、それを参考に書き直したのが以下の関数です。引数はHTML要素のIDで、該当要素の子要素を全て削除します。

function delInnerHtmlAll(nodeId) {
  var element = document.getElementById(nodeId)
  for (var i=element.childNodes.length-1; i>=0; i--) {
    element.removeChild(element.childNodes[i]);
  }
}
 

で、「何で上手く行かなかったんだろう?」 といろいろ試してみた結果、for ループの回し方がダメだったんですね。

当初、僕は

for (var i=0; i<element.childNodes.length; i++) {
 
と書いてたんですが、頭から消していってはいけなかったんです。

想像するに、最初の要素を削除した場合、Perl で配列に対して shift を実行したときように、添字に対する要素がズレていくのが原因ではないかと思われます。

具体的には、1番目の要素が削除されると2番目の要素が1番目の要素として再設定されて、3番目以降の要素についても同様にズレていって、最終的には配列としての長さが1短くなるというイメージかな。

なるほど、それでは上手く動かないわけだ。

参照リンク
 ・子ノードを全て削除する (removeChild) by 新JavaScript例文辞典

スポンサードリンク
コメント
Verify your Comment
Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

コメントを投稿
トラックバック

このページのトラックバックURL:
http://www.typepad.com/services/trackback/6a01310f1f31c0970c017615e36480970c

このページへのトラックバック一覧 JavaScriptのremoveChildを使う際の注意点:


プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER

  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサードリンク