【javascript】DOM走査中にDOM操作をしてはならない
文字通りのことなのだが、document.getElementsByTagName("input")で取得した要素たちに対して1番目の後ろに新しい要素を追加して（insertAfter）、2番目を消して（removeChild）。。。といった処理を進めると、追加、削除のたびにn番目がずれていくので、むちゃくちゃな結果になることがある。
取得した要素のリストに対していったん走査して、操作の対象を拾い出して、拾い出した要素に対して操作するという流れが無難。
これはダメ
var select = document.getElementById("xxxxxx")
var options = select.getElementsByTagName("option")
for (var i = 0, l = options.length; i < l; ++i) {
//選択されている要素以外を削除してみる
if(!options[i].selected) {
select.removeChild(options[i])
}
}
・こうなる
こうする
var select = document.getElementById("yyyyyy")
var options = select.getElementsByTagName("option")
var targets = []
for (var i = 0, l = options.length; i < l; ++i) {
//選択されている要素以外を削除したかったら、いったん選択されていない要素を拾い出して
if(!options[i].selected) {
targets[] = options[i]
}
}
//拾い出した要素に対して操作する
for (var i = 0, l = targets.length; i < l; ++i) {
select.removeChild(targets[i])
}
・こうなる