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

问题描述

问 题

<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个例子，所以函数应该怎么写才对？并且我的问题出在哪里呢？

解决方案

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

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

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

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

效果

这篇关于javascript - 一个&lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;列表用remove删除不干净，哪里出了问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！