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 相关文章推荐
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 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生成静态页面教程
2012/01/10 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
深入理解Promise.all
2018/08/08 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
微信小程序的线程架构【推荐】
2019/05/14 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Python 函数返回值的示例代码
2019/03/11 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
进口业务员岗位职责
2014/04/06 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书