DOM节点删除不完全有关问题

DOM节点删除不完全问题
做的是一个联动下拉菜单,第一次改变第一个下拉菜单时没有问题,第二次改变第一个下拉菜单时,首先要删除第二个下拉菜单中的所有选项,也就是要先清空id= "city "的 <select> 的下属节点,再加载新的节点,现在的问题是第二次改就第一下拉菜单值时, <select> 的下属节点并不完全删除,只删除了一部分,请问如何解决?我已经使用了循环删除了.

JS部分源文件如下:
-------------------------------------------
function   createXHR()   {
//建立XMLHttpRrquest对象
if   (window.ActiveXObject)   xmlhttp=new   ActiveXObject( "Microsoft.XMLHTTP ");
else   if   (window.XMLHttpRequest)   xmlhttp=new   XMLHttpRequest;
}

function   pro_city(pro){
if   (pro!= " "){               //判断第一个下拉菜单是否有值转入
createXHR();                 //调用XMLHttpRequest对象建立函数
xmlhttp.onreadystatechange=add_option;       //回调函数是add_option
//调用URL为带参数的ASP页面,该页面接收第一个下拉菜单改变后的值,从数据库内取出相对应的第二个下拉菜单的值
url= "ajax4_2.asp?pro= "+pro;
xmlhttp.open( "GET ",url,true);
xmlhttp.send(null);
}
}

function   add_option(){
if   (xmlhttp.readyState==4){
if   (xmlhttp.status==200){
                                    city_id=document.getElementById( "city ")
if   (city_idhasChildNodes){
//清空第二个下拉菜单原有内容
for   (i=0;i <city_id.childNodes.length;i++){
city_id.removeChild(city_id.childNodes[i]);
}
}
citys=xmlhttp.responseText;     //取得ASP页面返回的值
city_a=citys.split( ", ");
for   (i=0;i <city_a.length;i++){
//把从ASP页面得到的值和相对应的属性添加到第二个下拉菜单中去
city=city_a[i]
opt=document.createElement( "option ");
opt.appendChild(document.createTextNode(city));
city_id.appendChild(opt);
city_id.childNodes[i].setAttribute( "value ",city);
}
}
}
}

------解决方案--------------------
//清空第二个下拉菜单原有内容
for (i=0;i <city_id.childNodes.length;i++){
if(city_id.childNodes[i])city_id.removeChild(city_id.childNodes[i]);
i -= 1;
}
------解决方案--------------------
for (i=0;i <city_id.childNodes.length;i++){
city_id.removeChild(city_id.childNodes[0]); //childNodes[i]改成childNodes[0]
}