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 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 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
php 显示指定路径下的图片
2009/10/29 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
详解Python中for循环是如何工作的
2017/06/30 Python
Python Flask-web表单使用详解
2017/11/18 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
python三方库之requests的快速上手
2019/03/04 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
小学三年级学生评语
2014/04/22 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
公司股份合作协议书
2014/12/07 职场文书
幼儿园中班教学反思
2016/03/03 职场文书