html5中JavaScript删除全部节点
如果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[]; //总是删除第一个，是不是更简单
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>
html5中JavaScript删除全部节点的更多相关文章
- openstack中彻底删除计算节点的操作记录
在使用openstack的过程中,我们经常会添加好几台计算节点来部署虚拟机,在后续使用中由于某些原因,一些计算节点出现了问题,需要将这些出了问题的计算节点从openstack的控制节点中踢出去!但是很 ...
- redis cluster中添加删除重分配节点例子
redis cluster配置好,并运行一段时间后,我们想添加节点,或者删除节点,该怎么办呢. 一,redis cluster命令行 //集群(cluster) CLUSTER INFO 打 ...
- javascript删除元素节点
1.删除元素父节点 function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentElem ...
- [转]Javascript removeChild()删除节点及删除子节点的方法(同样适用于jq)
Javascript removeChild()删除节点及删除子节点的方法 这篇文章主要介绍了Javascript removeChild()删除节点及删除子节点的方法的相关资料,需要的朋友可以参考下 ...
- 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)
getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...
- html5中的dom中的各种节点的层次关系是怎样的
html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...
- javascript中的删除方法
可能呢再开发的过程中呢使用的不是很多,但是碰上呢可以注意下 1.比如: var x = 10; delete x; console.log(x); 结果是多少,是10,不是异常也不是undefined ...
- GMF中，删除节点和连线的另一种实现
问题 在GMF中,如果需要programmatically删除节点或连线,在google中我们很容易搜索到<GMF中,删除节点和连线的实现>一文(我并不确定这是原创作者的原始链接),很多人 ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
随机推荐
- 原创科幻短篇《VR》
近些年VR很火,现在似乎又降温了,那么问题来了:VR到底有前景吗?我农村来的读书又少看不清楚哇.近些年房地产很火,现在似乎还是很火,那么问题来了:房价到底会降吗?我农村来的读书又少看不清楚哇. 以下正 ...
- 物联网架构成长之路(29)-Jenkins环境搭建
0. 说明 哈哈,前面中间插入了一篇Eclipse增加Git插件,在此之前真的没有用过GIT. 1. 运行Jenkins 这里为了方便,还是用Docker方式安装,由于这个是标准的war报,不对Doc ...
- Myeclipse安装、配置、测试
Myeclipse安装.配置.测试(win7_64bit) 目录 1.概述 2.本文用到的工具 3.安装与激活 4.JavaSE开发测试(确保JDK已正确安装) 5.JavaEE开发测试(确保服务器和 ...
- 【OpenFOAM案例】01 elbow
本案例演示利用OpenFOAM的icoFoam求解器计算弯曲管道中的混合流动问题. 1 拷贝tutorials文件 启动终端,且拷贝tutorials文件夹中的文件.利用命令: cp -r $FOAM ...
- 【转载】Linux 命令行快捷键 - 移动光标
Linux 命令行快捷键 - 移动光标 涉及在linux命令行下进行快速移动光标.命令编辑.编辑后执行历史命令.Bang(!)命令.控制命令等.让basher更有效率. 常用 ctrl+左右键:在单词 ...
- 如何在你的Vue项目配置vux
做移动端项目的话vue现在是首要的选择,足够轻便,文档足够全,当然用的人多,项目中遇到的坑别人可能也遇到过,解决起来也比较方便,至于在开发中做需要的移动端组件库,个人比较推崇vux. 其实项目里组件库 ...
- 10款WordPress的插件让你的网站的移动体验
随着科技的不断发展,需要改变营销策略的一个企业就变得非常重要.你不能指望用你的营销工具来留住你的客户.智能手机和平板电脑已经改变了消费者的行为方式.现在,人们甚至不想去他们的电脑或笔记本电脑,以检查产 ...
- ASP.NET MVC Web API 学习笔记---Web API概述及程序示例
1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过 ...
- xorm中的几个坑
项目中使用的是xorm,虽然用了很顺手了,可是还是会遇到一些坑,这里纪录一些. 结构体自动忽略空字段 在xorm中,结构体会自动忽略空字段(或则说默认值,比如int 的0 ,string的" ...
- 从零开始搭建FAQ引擎--基于ES的字面匹配
从零开始搭建FAQ引擎--基于ES的字面匹配