javascript - 一个<ul><li></li></ul>列表用remove删除不干净，哪里出了问题？-PHP中文网问答


脚本之家一
脚本之家二
脚本之家三
脚本之家四

一. 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个例子可以清除掉所有

标签，发现不可以以后去尝试第1个例子，根据第1个例子又去尝试第2个例子，所以函数应该怎么写才对？并且我的问题出在哪里呢？

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]); }

全部回复(3)

伊谢尔伦2017-04-11 12:49:30 3楼

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

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

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

效果

赞 +0

添加回复

怪我咯2017-04-11 12:49:30 2楼

用empty

PHP中文网2017-04-11 12:49:30 1楼

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

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