为什么要点两下才能删除一个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 ...
随机推荐
- PAT1021
给定一个k位整数N = dk-1*10k-1 + ... + d1*101 + d0 (0<=di<=9, i=0,...,k-1, dk-1>0),请编写程序统计每种不同的个位数字 ...
- 树中两个结点的最低公共祖先--java
题目:对于任意一个树,不仅仅限于二叉树,求树中两个结点的最低公共祖先结点. 解析:对于任意一棵树,显然并不局限于二叉树,也就是说树的非叶子结点可能存在多个子节点.所以,我们可以定义两个链表结构,存储这 ...
- Junit单元测试--01
如何编写单元测试 燕双龙 一 单元测试简介 单元测试是代码正确性验证的最重要的工具,也是系统测试当中最重要的环节.也是唯一需要编写代码才能进行测试的一种测试方法.在标准的开发过程中,单元测试的代码与实 ...
- HDU 4514 湫湫系列故事——设计风景线（并查集+树形DP）
湫湫系列故事——设计风景线 Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) To ...
- docker介绍与安装
.docker是什么 Docker是一个开源的应用容器引擎,使用Go语言开发,基于Linux内核的cgroup,namespace,Union FS等技术,对应用进程进行封装隔离,并且独立于宿主机与其 ...
- filesystem
1 tmpfs 以下来源于维基百科: tmpfs是类Unix系统上暂存档存储空间的常见名称,通常以挂载文件系统方式实现,并将数据存储在易失性存储器而非永久存储设备中.和RAM disk的概念近似,但后 ...
- UIAlertController 实现kvo实现mes文字设置
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"更新提示" message:[NS ...
- 第13届景驰-埃森哲杯广东工业大学ACM程序设计大赛部分题解
A 跳台阶 思路:其实很简单,不过当时直接dp来做了 AC代码: #define _CRT_SECURE_NO_DEPRECATE #include<iostream> #include& ...
- pat 团体天梯赛 L3-009. 长城
L3-009. 长城 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 邓俊辉(清华大学) 正如我们所知,中国古代长城的建造是为了抵御外 ...
- 【ZOJ4060】 Flippy Sequence（规律）
题意:给定两个长度为n的01序列A和B,要求分别从两个序列中取两段将段中数字取反,使得A和B完全相同,求方案数 n<=1e6,sum(n)<=1e7 思路:现场8Y…… 将A和B异或之后问 ...