如果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删除全部节点的更多相关文章

  1. openstack中彻底删除计算节点的操作记录

    在使用openstack的过程中,我们经常会添加好几台计算节点来部署虚拟机,在后续使用中由于某些原因,一些计算节点出现了问题,需要将这些出了问题的计算节点从openstack的控制节点中踢出去!但是很 ...

  2. redis cluster中添加删除重分配节点例子

    redis cluster配置好,并运行一段时间后,我们想添加节点,或者删除节点,该怎么办呢. 一,redis cluster命令行     //集群(cluster)  CLUSTER INFO 打 ...

  3. javascript删除元素节点

    1.删除元素父节点 function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentElem ...

  4. [转]Javascript removeChild()删除节点及删除子节点的方法(同样适用于jq)

    Javascript removeChild()删除节点及删除子节点的方法 这篇文章主要介绍了Javascript removeChild()删除节点及删除子节点的方法的相关资料,需要的朋友可以参考下 ...

  5. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

  6. html5中的dom中的各种节点的层次关系是怎样的

    html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...

  7. javascript中的删除方法

    可能呢再开发的过程中呢使用的不是很多,但是碰上呢可以注意下 1.比如: var x = 10; delete x; console.log(x); 结果是多少,是10,不是异常也不是undefined ...

  8. GMF中,删除节点和连线的另一种实现

    问题 在GMF中,如果需要programmatically删除节点或连线,在google中我们很容易搜索到<GMF中,删除节点和连线的实现>一文(我并不确定这是原创作者的原始链接),很多人 ...

  9. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

随机推荐

  1. MySQL优化器 --- index_merge

    [背景] 对于关系数据库中的一张表,通常来说数据页面的总大小要比较某一个索引占用的页面要大的多(上面说的索引是不包涵主键索引的); 更进一步我们可以推导出,如果我们通过读索引就能解决问题,那么它相比读 ...

  2. mysql(5.7)配置文件示例

    # For advice on how to change settings please see# http://dev.mysql.com/doc/refman/5.6/en/server-con ...

  3. Mac 开发必备 利器 iterm2 oh-my-zsh

    推荐终端神器 iterm2 以及 oh-my-zsh,可以研究一下怎么用,好的开发环境是可以提高效率的,以及alias 的使用. https://www.zhihu.com/question/2744 ...

  4. am335x ubi Read-only mode

    是因为kernel里面有一个错误,要注释一下就好.

  5. 买了第一台mac

    今天,我的第一台mac到手了.是Macbook air 13.3寸屏的.正好这几天bestbuy大打折,索性入手了一台15年最低配的,一共只花了$750,包括税. 还是有点舍不得,而且用不习惯.

  6. GDC2017【神秘海域 4】中所使用的顶点着色器技术

    原文链接 http://game.watch.impress.co.jp/docs/news/1047802.html   会場:San Francisco Moscone Convention Ce ...

  7. 排序算法--插入排序(Insertion Sort)_C#程序实现

    排序算法--插入排序(Insertion Sort)_C#程序实现 排序(Sort)是计算机程序设计中的一种重要操作,也是日常生活中经常遇到的问题.例如,字典中的单词是以字母的顺序排列,否则,使用起来 ...

  8. Oracle RAC环境下ASM磁盘组扩容

    生产环境注意调整以下参数: ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...

  9. window 控制台解决中文乱码

    console.log 输出中文乱码,怎么解决 是由于DOS窗口显示的编码同logcat日志中不同导致的乱码问题.DOS窗口默认的编码是GBK,而LogCat打印的是UTF-8的编码,所以要设置DOS ...

  10. 3D Slicer Programmatically Set Slice Offset and Intersections 用代码修改Slicer中的切片偏移和交叉点显示

    在3D Slicer中,当我们导入.mha/.mhd等格式的volume文件后,那么我们就可以在Axial, Sagittal, Coronal三个方向来观察我们的MRI或者CT的图像了.3D Sli ...