NodeListのノードをremoveChildで順番に消していこうとしたら、半分くらい残る。なぜ。

var tbody = document.getElementsById("hoge");
var nodelist = tbody.getElementsByTagName("tr");


var len = nodelist.length;
for (var i = 0; i < len; i++) {
    tbody.removeChild(nodelist[i]);
}

上手く説明できないけど、nodelistの数値インデックスの関係がおかしくなっている。getElementsByTagNameが返すNodeListは参照で、ノードを削除していくごとに、動的にNodeListの長さも変わっていくのかな。だから、削除していくと、「そんな数字インデックスに該当するノードは無いよー」ってなってるっぽい。

ということで、ノードの削除は、常にNodeListの先頭のものを対象に実行するとキレイに行く。

while (nodelist.length > 0) {
    tbody.removeChild(nodelist[0]);
}

仕組みが分かれば、そりゃそうだって話なんだよね。リスト操作の基本か。こういうこと考えると、Iteratorがあると便利なのかもしれない。

  $A(nodelist)