Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
531 views
in Technique[技术] by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

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

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

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

clipboard.png
效果
clipboard.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...