El asunto es asi; en la primera vuelta del bucle for i tiene el valor 0 y dentro del bucle se tiene esta instrucción:
select.removeChild(combos[i]);
Con esto se elimina el <option>1</option> que ocupa el índice 0, al ocurir esto los otros <option> recorren sus posiciones dentro del select, ahora el <option>2</option> ocupa el índice 0, el <option>3</option> ocupa el índice 1 el <option>4</option> ocupa el índice 2 y asi sucesivamente. Luego en la segunda vuelta del bucle i aumenta su valor a 1 y al cumplirse la sentencia:
select.removeChild(combos[i]);
Se elimina el <option>3</option> que ahora ocupa el índice 1 y el resto de <option> vuelven a recorrerse con lo que el <option>4</option> pasa a ocupar el índice 1 y el <option>5</option> se situa en el índice 2. En la siguiente vuelta i tiene el valor 2 por lo tanto se elimina el <option> que esta ocupando el índice 2, el cuál en ese momento es el <option>5</option>. Por último, en la siguiente vuelta i vale 3 pero en ese momento ya no exite ningún <option> ocupando esa posición debido a esto la sentencia para eliminar no se puede cumplir y el bucle es abandonado, resultando ser eliminados solo los <option> 1, 3 y 5 que es algo no deseado. Para eliminar secuencialmente los nodos hijos de un elemento lo común es emplear un bucle while conjuntamente con el método
hasChildNodes() de esta forma.
Código Javascript
:
Ver originalfunction Cdelete()
{
var select= document.getElementById("selectCombo");
while(select.hasChildNodes())
{
select.removeChild(select.firstChild);
}
}
El método hasChildNodes() retorna true mientras el <select> tenga nodos hijos y al método removeChild() se le pasa siempre como parámetro la refencia al primer nodo hijo del <select>.