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 相关文章推荐
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 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
cache_lite试用
2007/02/14 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
javascript中关于执行环境的杂谈
2011/08/14 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
python对url格式解析的方法
2015/05/13 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
违反学校规定检讨书
2014/01/18 职场文书
营销团队口号
2014/06/06 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
环保公益策划方案
2014/08/15 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书