为什么要点两下才能删除一个li节点 原来是空白节点作怪

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为什么要点两下才能删除一个li节点 原来是空白节点作怪相关的知识，希望对你有一定的参考价值。

奇怪吧，下面的代码居然要点两次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节点 原来是空白节点作怪的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript之节点的创建替换删除插入

jquery中怎么删除<ul>中的整个<li>包括节点

HashMap要点总结

DOM编程 删除节点

Jquery删除活动类并将其添加到li节点和preventDefault问题

（急）c#中datagridview表中删除行后重新加载后删除的行会变成空白行。数据是没有了，空白行是啥情况？