奇怪吧，下面的代码居然要点两次button才能删除一个li节点：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 </head>

 <body>
<ul id="myUl"> <!-- 这样会有空白节点  -->
<li>111</li>
<li>222</li>
<li>333</li>
</ul>

  <button onclick="removeLi();" >removeLi</button>
 </body>
</html>

<script type="text/javascript">
<!--
    // 奇怪吗？为什么要点两下
    function removeLi(){
        var ul=document.getElementById("myUl");
        var li=ul.firstChild;
        ul.removeChild(li);
    }
//-->
</script>

用ul.childNodes.length查看一下，原来是空白节点在作怪，这样就好了：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 </head>

 <body>
<ul id="myUl"><li>111</li><li>222</li><li>333</li></ul> <!-- 这样就消除了空白节点，firstChild是第一个li了  -->

  <button onclick="removeLi();" >removeLi</button>
 </body>
</html>

<script type="text/javascript">
<!--
    // 现在一下就删除li
    function removeLi(){
        var ul=document.getElementById("myUl");
        var li=ul.firstChild;
        ul.removeChild(li);
    }
//-->
</script>

选ul的子节点时限定li也可行：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 </head>

 <body>
<ul id="myUl">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>

  <button onclick="removeLi();" >removeLi</button>
 </body>
</html>

<script type="text/javascript">
<!--
    //
    function removeLi(){
        var ul=document.getElementById("myUl");
        var li=ul.getElementsByTagName("li")[0];// 这样直接无视空白节点，是推荐做法
        ul.removeChild(li);
    }
//-->
</script>

为什么要点两下才能删除一个li节点 原来是空白节点作怪的更多相关文章

  1. Linux下迅速删除一个大文件夹

    rsync -av --delete /tmp/null/ ./        迅速删除大文件夹,如缓存 快速删除大目录(即大量文件)1.先建立一个空目录 mkdir /data/blank 2.用r ...

  2. Eclipse 下如何删除一个项目的 SVN 信息

    选中项目,右键 - Team - 断开连接 出现如下对话框,根据需要,选择 “删除”或者“不删除”,点击 Yes 即可

  3. MFC 中 删除一个非空文件夹

    MFC中提供了删除文件夹的一个封装函数 RemoveDirectory(LPCTSTR lpPathName),我们只要把要删除的文件夹的路径传进去就可以删除了,貌似一切如此简单.我象征性的建立一个文 ...

  4. 使用C#删除一个字符串数组中的空字符串

    C#中要如何才能删除一个字符串数组中的空字符串呢?随着微软对C#不断发展和更新,C#中对于数组操作的方式也变得越来越多样化.以往要实现过滤数组中的空字符串,都是需要实行循环的方式来排除和过滤.C#3. ...

  5. 找到div下的第一个ul

    $("div#div的id ul li a")//选择的是div下 ul下所有li下的所有a标签 $("div#div的id").children(" ...

  6. DROP TABLE - 删除一个表

    SYNOPSIS DROP TABLE name [, ...] [ CASCADE | RESTRICT ] DESCRIPTION 描述 DROP TABLE 从数据库中删除表或视图. 只有其所有 ...

  7. 删除一个目录和其各级子目录下的.svn文件

    两种方法[1]用find命令和其action来实现[2]用rm直接实现$ cd /tmp/xxx$ rm -rf  `find . -name .svn`就可以实现了. 删除SVN目录及从服务器端删除 ...

  8. MD5做为文件名。机器唯一码有电脑的CPU信息和MAC地址，这两个信息需要在linux或unix系统下才能获取吧。

    可以采用机器(电脑)唯一码 + 上传IP + 当前时间戳 + GUID ( + 随机数),然后MD5做为文件名.机器唯一码有电脑的CPU信息和MAC地址,这两个信息需要在linux或unix系统下才能 ...

  9. linux面试题：删除一个目录下的所有文件，但保留一个指定文件

    面试题:删除一个目录下的所有文件,但保留一个指定文件 解答: 假设这个目录是/xx/,里面有file1,file2,file3..file10 十个文件 [root@oldboy xx]# touch ...

随机推荐

  1. HDU6438 Buy and Resell 解题报告（一个有趣的贪心问题的严格证明）

    写在前面 此题是一个很容易想到的贪心题目,但是正确性的证明是非常复杂的.然而,目前网上所有题解并未给出本题贪心算法的任何正确性证明,全部仅停留在描述出一个贪心算法.本着对算法与计算机科学的热爱(逃), ...

  2. GDOI2018前夕 错误总结

    算法易错点 $FFT$ 1.注意精度,以及是否取整 2.注意$complex$类不要写错,复数乘法是这样的: complex operator *(const complex &b){retu ...

  3. git 使用报错记录

    错误一:git fatal: unable to write new index file主要原因就是服务器磁盘空间不够导致的,增加服务器空间就OK了在百度上面搜索没得到什么有效信息,在gooogle ...

  4. inux监控平台搭建-监控项

    linux监控平台搭建-监控项 本人运维某生态互联网监控平台服务.过程中遇见了很多问题.目前互联网有很多的开源监控工具:nagios.zabbix.falcon.cacti...各有优点.这里不讲解监 ...

  5. 【shell】Shell命令合集(0)

    Ccat zdd 浏览文件zdd的内容cat zdd1 zdd2 浏览多个文件的内容cat -n zdd浏览文件zdd的内容并显示行号 cd 回到起始目录,也即刚登陆到系统的目录,cd后面无参数cd ...

  6. 快速排序Quick sort（转）

    原理,通过一趟扫描将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变成有序 ...

  7. JS和jquery加载的区别

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 搭建https本地服务器：如何得到被所有客户端认可的ssl证书

    https,作为http的加密版,作用还是很大的:能够提升网站搜索权重,让你的网站更安全,而且如果你的网站没有使用https的话,将无法作为移动设备原生应用的api接口.可见掌握为网站启用https的 ...

  9. FZU 1078 计算循环冗余码【模拟】

    计算机网络中采用循环冗余码来校验数据的正确性.其原理是:发送方计算出待发送的二进制数据的循环冗余码,并随同原数据一起发送到接收方:接收方通过重新计算接收到的数据的循环冗余码,并和收到的循环冗余码进行比 ...

  10. Java 8 Comparator: 列表排序

    在本文中,我们将看到几个关于如何在Java 8中对List进行排序的示例. 1.按字母顺序排序字符串列表 List<String> cities = Arrays.asList( &quo ...