この日記は私的なものであり所属会社の見解とは無関係です。 GitHub: takahashikzn

"select.options.length = 0"はダメ


Selectタグの中身を全部消そうとして、

// Select要素
var selectElem = document.getElementById("...");

selectElem.options.length = 0;

としたんだけど、なぜかうまく消えていない時がある。
特にChromeで顕著でした。

var selectElem = document.getElementById("selectElem");

selectElem.options.length = 0;
selectElem.options.length = 0;
selectElem.options.length = 0;
selectElem.options.length = 0;

とか、何回か繰り返すとやっとクリアされる。なんだこりゃ。

selectElemから子要素を消すのが別スレッドで動いているからなのか…?


うーん、困った…

というわけでググッてみたら、
同じ現象について議論されてました

ここによると、elem.removeChildを使えとのこと。


なるほど、と思い

// Select要素
var selectElem = document.getElementById("...");

while (0 < selectElem.childNodes.length) {
    selectElem.removeChild(selectElem.childNodes[0]);
}

とかやってみると、確かにクリアできました。
これってselectタグだけの現象なんだろうか。

一番スマートな解法

先に上げたリンク先に載ってますが、

// Select要素
var selectElem = document.getElementById("...");

selectElem.innerHTML = "";

とやるのが一番簡単らしい。
IE8, Firefox3.6, Chrome4で試しましたが、ちゃんと動いているようです。