删除子元素的一个小问题

我想要删除某个父元素下的某一类子元素：如下程序：
<!doctype html>

删除子元素
<br> .box{border:1px solid red;width:150px;height:150px;float:left;margin:20px 10px 0 20px;}<br>

删除box

function dele(){ var parent=document.getElementById("wrap"); var box=document.getElementsByClassName("box"); alert(box.length); //明明是三怎么只能删除两个盒子 for(var i=0;i<box.length;i++){ console.log(i); parent.removeChild(box[i]); } }

本来应该三个box都删除，可就是只能删除两个，这是什么样原因呢，弄了我一下午了，纠结，求解！谢谢

javascript数组索引是以1开头

图片说明
刚在chrome中调试了，当删除一个box,box对象会减小一个， var box = document.getElementsByClassName("box"); box是对元素的引用，所以少
删除一个

代码修改成如下就可以：
function dele(){
var parent=document.getElementById("wrap");
var box=document.getElementsByClassName("box"); alert(box.length); //明明是三怎么只能删除两个盒子
/*for(var i=0;i<box.length;i++){
console.log(i); parent.removeChild(box[i]);
}*/
while(box[0]){
parent.removeChild(box[0]);
}
};

删除的时候，记得脚标是从0开始的