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で試しましたが、ちゃんと動いているようです。
2018-05-23追記