为什么要点两下才能删除一个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图像采集与传输
项目简介 本次编程实战主要是围绕嵌入式linux v4l2采集框架展开,包括以下几个部分: v4l2视频采集 IPU转码 framebuffer显示 自定义UDP简单协议进行传输 上位机软件 ...
- linux基础(基本命令)
Linux学习 1.Linux安装.配置 Linux的操作背景介绍 Linux操作系统 开源.自由且开发源代码的类Unix操作系统 厂商较多 著名的有R ...
- SGX技术初探
一.SGX技术背景 1.1 SGX技术定义 SGX全称Intel Software Guard Extensions,顾名思义,其是对因特尔体系(IA)的一个扩展,用于增强软件的安全性.这种方式并不是 ...
- Unity属性——AddComponentMenu
字面理解:添加 组件选项菜单 分析:可能是添加一个脚本或者组件到一个物体上 验证: 新建一个脚本:AttributeTest 提示:添加一个组件菜单属性,允许你放一个脚本在Compoent菜单下,来代 ...
- 【bzoj2245】[SDOI2011]工作安排 费用流
题目描述 你的公司接到了一批订单.订单要求你的公司提供n类产品,产品被编号为1~n,其中第i类产品共需要Ci件.公司共有m名员工,员工被编号为1~m员工能够制造的产品种类有所区别.一件产品必须完整地由 ...
- 1.docker学习
Docker —— 从入门到实践 http://udn.yyuap.com/doc/docker_practice/introduction/index.html 非常详细的Docker学习教程 ht ...
- 解决 unity 用 vs通过wifi 真机联调 一直连接不上
平时 在公司网络太差,要通过wifi 用vs真机联调时,vs一直连不上设备,很是蛋疼...用下面官方给出的方法可以解决 Attaching MonoDevelop Debugger To An And ...
- mysql 排序字段与索引有关系吗?
mysql 排序字段与索引有关系吗?答案与否需要你explain一下你的sql脚本 另外记住:date_add()方法会影响Index_modify_time索引(即:时间字段索引) 一般遇到这样的 ...
- javascript草稿
原文发布时间为:2011-06-01 -- 来源于本人的百度文章 [由搬家工具导入] @MyHelper.Script("jquery-1.6.1.min.js", Url) ...
- web.config add handlers and httpmodule to System.Web section.
<?xml version="1.0" encoding="utf-8"?> <!-- For more information on how ...