一个<ul><li></li></ul>列表用remove删除不干净，哪里出了问题？

Question

<ul id="box">
<li>脚本之家一</li>
<li>脚本之家二</li>
<li>脚本之家三</li>
<li>脚本之家四</li>
</ul>

一. window.onload=function(){

        var obox=document.getElementById("box");
        var lis=obox.getElementsByTagName("li");
        obox.removeChild(lis[0]);
        obox.removeChild(lis[0]);
       // obox.removeChild(lis[2]);
       // obox.removeChild(lis[3]);
        }
        网页显示：
        脚本之家三
        脚本之家四

二.
window.onload=function(){

        var obox=document.getElementById("box");
        var lis=obox.getElementsByTagName("li");
        obox.removeChild(lis[0]);
        obox.removeChild(lis[0]);
        obox.removeChild(lis[1]);
        obox.removeChild(lis[1]);

    }
        网页显示：
        脚本之家三
        脚本之家四    

三.
window.onload=function(){

        var obox=document.getElementById("box");
        var lis=obox.getElementsByTagName("li");
        obox.removeChild(lis[0]);
        obox.removeChild(lis[1]);
        obox.removeChild(lis[2]);
        obox.removeChild(lis[3]);

    }
        网页显示：
        脚本之家二
        脚本之家四  

思考：一定是我没搞清楚这几个节点的内部对象。开始以为第3个例子可以清除掉所有<li></li>标签，发现不可以以后去尝试第1个例子，根据第1个例子又去尝试第2个例子，所以函数应该怎么写才对？并且我的问题出在哪里呢？

Answer 1

嗯~~~其实你这个问题是没搞清楚js的处理方式

当你运行第一个obox.removeChild(lis[0]);的时候，lis的集合已经不是没有进行删除操作之前的集合了,这时候的lis集合是你删除节点后的节点总和，简单的来说这时候lis.length是3，而开始的时候是4，也就是说，你想要删除全部的节点就需要进行四次obox.removeChild(lis[0]);操作。
有几点小建议：

• 养成良好的代码书写风格

• 运行js脚本时多依赖console控制台来进行差错
  建议你将以上代码这样修改后去控制台查看lis的变化

效果

Answer 2

用empty

Answer 3

window.onload=function(){
var obox=document.getElementById("box");
var lis=obox.getElementsByTagName("li");
obox.removeChild(lis[0]);
obox.removeChild(lis[0]);
obox.removeChild(lis[0]);
obox.removeChild(lis[0]);
}

才对，另外你的第二个例子应该是只剩下三。

原理就是当你第一行移除[0]执行后，原本[1]位置的行就变成[0]了，[2]位置的行就变成[3]了，依次类推。