为什么要点两下才能删除一个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节点 原来是空白节点作怪的更多相关文章
- Linux下迅速删除一个大文件夹
rsync -av --delete /tmp/null/ ./ 迅速删除大文件夹,如缓存 快速删除大目录(即大量文件)1.先建立一个空目录 mkdir /data/blank 2.用r ...
- Eclipse 下如何删除一个项目的 SVN 信息
选中项目,右键 - Team - 断开连接 出现如下对话框,根据需要,选择 “删除”或者“不删除”,点击 Yes 即可
- MFC 中 删除一个非空文件夹
MFC中提供了删除文件夹的一个封装函数 RemoveDirectory(LPCTSTR lpPathName),我们只要把要删除的文件夹的路径传进去就可以删除了,貌似一切如此简单.我象征性的建立一个文 ...
- 使用C#删除一个字符串数组中的空字符串
C#中要如何才能删除一个字符串数组中的空字符串呢?随着微软对C#不断发展和更新,C#中对于数组操作的方式也变得越来越多样化.以往要实现过滤数组中的空字符串,都是需要实行循环的方式来排除和过滤.C#3. ...
- 找到div下的第一个ul
$("div#div的id ul li a")//选择的是div下 ul下所有li下的所有a标签 $("div#div的id").children(" ...
- DROP TABLE - 删除一个表
SYNOPSIS DROP TABLE name [, ...] [ CASCADE | RESTRICT ] DESCRIPTION 描述 DROP TABLE 从数据库中删除表或视图. 只有其所有 ...
- 删除一个目录和其各级子目录下的.svn文件
两种方法[1]用find命令和其action来实现[2]用rm直接实现$ cd /tmp/xxx$ rm -rf `find . -name .svn`就可以实现了. 删除SVN目录及从服务器端删除 ...
- MD5做为文件名。机器唯一码有电脑的CPU信息和MAC地址,这两个信息需要在linux或unix系统下才能获取吧。
可以采用机器(电脑)唯一码 + 上传IP + 当前时间戳 + GUID ( + 随机数),然后MD5做为文件名.机器唯一码有电脑的CPU信息和MAC地址,这两个信息需要在linux或unix系统下才能 ...
- linux面试题:删除一个目录下的所有文件,但保留一个指定文件
面试题:删除一个目录下的所有文件,但保留一个指定文件 解答: 假设这个目录是/xx/,里面有file1,file2,file3..file10 十个文件 [root@oldboy xx]# touch ...
随机推荐
- 初学Linux 命令
查看ip:ifconfig 切换用户:us root(root为用户名) 显示当前目录:pwd 列出当前目录下所有文件:ls 进入某个目录 :cd 创建一个文件夹:mkdir 创建多个目录(当没有该父 ...
- redis.clients.jedis.exceptions.JedisDataException: MISCONF Redis is configured to save RDB snapshots
最近在学习Redis ,在写test测试的时候碰到这个报错: redis.clients.jedis.exceptions.JedisDataException: MISCONF Redis is c ...
- spring boot redis代码与配置
import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Co ...
- Jmeter 设置HTTP RPS性能测试模型
其实也挺简单的,主要是刚接触jmeter,记录一下. 1. 首先需要安装jmeter...真是废话... 2. 需要安装JMeterPlugins-ExtrasLibs-1.3.0.zip: JMet ...
- id_rsa id_rsa.pub
id_rsa 私钥 id_rsa.pub 公钥 https://blog.csdn.net/qq_36663951/article/details/78749217 https://blog.cs ...
- RSA DSA
RSA https://blog.csdn.net/sunmenggmail/article/details/11994013 https://baike.baidu.com/item/RSA%E7% ...
- Java抽象类,接口,抽象方法
创建Animal抽象类 public abstract class Animal { public abstract void eat(); public abstract void sleep(); ...
- LeetCode Weekly Contest 70 A B C D
A. K-th Symbol in Grammar Description On the first row, we write a 0. Now in every subsequent row, w ...
- Android新特性之CardView的简单使用
Android新特性之CardView的简单使用 我们学习下Android5.0的新增加的控件CardView.首先我们了解一下CardView的基本使用,然后结合RecycleView使用CardV ...
- 使用OPENROWSET爆破SQL Server密码
使用OPENROWSET爆破SQL Server密码 OPENROWSET函数是SQL Server提供的一个连接函数.它可以用于使用OLE DB方式连接一个数据库,并进行数据查询等操作.使用该函 ...