html5中JavaScript removeChild 删除所有节点


Posted in HTML / CSS onMay 16, 2014

假设div里有这么些内容:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<title>iScroll demo: simple</title>
<script type="text/javascript">
function deleteData(){
}
</script>
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
</style>
</head>
<body>
<div ><input type="submit" name="button" id="button" value="删除li节点" class="button gray" onclick="deleteData()" /> </div>
<div >
<ul id="thelist">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 40</li>
</ul>
</div>
</body>
</html>

现在要通过JavaScript的功能,将它们清空。

虽然可以通过一句代码直接实现:

document.getElementById("content").innerHTML=""

但是本文里主要讨论 removeChild 函数。

很想当然地以为借助下面的代码就能完成:

复制代码
代码如下:

function deleteData(){
var el = document.getElementById('thelist');
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
for(var i = 0; i < liNodes.length; i++){
alert("删除"+i+" liNodes[i]="+ liNodes[i]);
el.removeChild(liNodes[i]);
//<-- el.removeChild(liNodes[i]);
}
}

没想到,点击了按钮后,竟然只清除掉1、3、5...,而2、4、6....竟然没有消失,

问题从一开始就产生了:

删除掉第一个节点后,后面节点的顺序全部发生了变化:原来的第二个节点往前蹭,成为新的第一个节点;原来的第三个节点,成为第二个节点……

于是呢,接下来原本是要删除第二个节点的,却将最原始的第三个节点给删除掉了。

最终,并没有全部删除,只删除掉1、3、5,留下了2、4、6。

语法没有错误,但是得不到所要的结果,这就是算法上面的错误!该如何修正呢?

“顺序删除”不行,那就“逆序删除”吧。将 for 语句修改一下:

复制代码
代码如下:

function deleteData(){
var el = document.getElementById('thelist');
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
for(var i = liNodes.length-1; i >=0; i--){
alert("删除"+i+" liNodes[i]="+ liNodes[i]);
el.removeChild(liNodes[i]);
//<-- el.removeChild(liNodes[i]);
}
}

试试吧,成功了!还可以使用下面方法:
复制代码
代码如下:

function deleteData() {
var el = document.getElementById('thelist');
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
for (var i=0;i<el.childNodes.length;i++){
var childNode = el.childNodes[0]; //总是删除第一个,是不是更简单
el.removeChild(childNode);
}
}

完成代码如下所示:
复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<title>iScroll demo: simple</title>
<script type="text/javascript">
function initData(){
var el = document.getElementById('thelist');
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
for(var i = liNodes.length-1; i >=0; i--){
alert("删除"+i+" liNodes[i]="+ liNodes[i]);
el.removeChild(liNodes[i]);
//<-- el.removeChild(liNodes[i]);
}
}
</script>
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
</style>
</head>
<body>
<div ><input type="submit" name="button" id="button" value="删除li节点" class="button gray" onclick="initData()" /> </div>
<div >
<ul id="thelist">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 40</li>
</ul>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
CSS3——齿轮转动关键代码
May 02 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 #HTML / CSS
分享全球十款超强HTML5开发工具
May 14 #HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 #HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 #HTML / CSS
HTML5 embed标签定义和用法详解
May 09 #HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 #HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 #HTML / CSS
You might like
ThinkPHP表单自动验证实例
2014/10/13 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
2014年公司庆元旦活动方案
2014/03/05 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
课外小组活动总结
2014/08/27 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
高中运动会广播稿
2014/09/16 职场文书
安全责任书
2015/01/29 职场文书
产品质量保证书范本
2015/02/27 职场文书
教师节倡议书2015
2015/04/27 职场文书
警示教育观后感
2015/06/17 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS