奇怪吧，下面的代码居然要点两次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. 集训队日常训练20181110 DIV2 题解及AC代码

    4375: 孪生素数  Time Limit(Common/Java):1000MS/3000MS     Memory Limit:65536KByteTotal Submit: 324       ...

  2. tomcat源码分析一

    废话少说,拉代码,导入eclipse开干,具体步骤可以参考http://hi.baidu.com/hateeyes/blog/item/7f44942a20ad8f9d023bf66d.html 下面 ...

  3. selenium webdriver——多表单切换与多窗口切换

    多表单切换 >>在Web应用中经常会遇到frame/iframe表单嵌套页面的应用,WebDriver只能在一个页面上对元素识别与定位,对于frame/iframe 表单内嵌页面上的元素无 ...

  4. Scala学习之路----基础入门

    一.Scala解释器的使用 REPL:Read(取值)-> Evaluation(求值)-> Print(打印)-> Loop(循环) scala解释器也被称为REPL,会快速编译s ...

  5. 使用 swagger组件给asp.net webapi文档生成

    1.名词解释 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模 ...

  6. python实现贪吃蛇

    贪吃蛇的算法还是比较简单的,蛇的移动我是通过不停添加一个head方块,然后判断应该加到蛇头的哪个方向,加完后删掉蛇尾就行了,如果吃到食物就不删蛇尾. 只是一个贪吃蛇只需要70行代码左右就可以了,后来又 ...

  7. 【BZOJ4477】字符串树（可持久化Trie）

    此题花费我整整三天的功夫.还在NoiP贴吧发过贴. 最后发现trie树建新节点时信息未完全复制,真是愚蠢之极. 言归正传. 如果我们已经知道了每个点上的trie树那么询问就是sum[x]+sum[y] ...

  8. javaScript防止拦截新窗口打开页面

    原文发布时间为:2009-05-04 -- 来源于本人的百度文章 [由搬家工具导入] 兼容IE.FF.GOOGLE。防止拦截。。。。 <html xmlns="http://www.w ...

  9. 网络上面好用的webserice方法【公开】

    原文发布时间为:2009-07-27 -- 来源于本人的百度文章 [由搬家工具导入] 本帖转自 http://www.webxml.com.cn/zh_cn/web_services.aspx?off ...

  10. hdu 2732 Leapin' Lizards 最大流 拆点 建图

    题目链接 题意 给定一张网格,格子中有些地方有柱子,有些柱子上面有蜥蜴. 每个柱子只能承受有限只蜥蜴从上面经过.每只蜥蜴每次能走到相距曼哈顿距离\(\leq k\)的格子中去. 问有多少只蜥蜴能走出网 ...