为什么要点两下才能删除一个li节点 原来是空白节点作怪
2024-10-20 16:01:58
奇怪吧,下面的代码居然要点两次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>
最新文章
- CoreOS和Docker入门
- Wpf usercontrol dispose
- Ecplise真机调试(Android)
- Hbase资料汇总
- php 简单分页类
- Daily Scrum – 1/5
- [OGRE]看备注学编程(02):打地鼠01-布置场地九只地鼠
- 异常:failed for object com.sdu.crm.pojo.Customer@136a986 [java.lang.NullPointerException]
- mysql 修改数据库data存放位置
- JAVA入门[3]—Spring依赖注入
- Jmeter性能测试报告扩展
- Oracle转换函数
- 解决WPF导入图片不显示的问题
- django + nginx + uwsgi
- react项目的react-router-dom路由的使用
- .NET Core开发日志——Middleware
- 【前端安全】JavaScript防流量劫持
- 将mysql的表导出为excel
- MikroTik RouterOS安装方法收集(转)
- Linux基础※※※※连接XShell到Ubuntu 14.04 LTS
热门文章
- [oldboy-django][1初始django]昨日回顾
- springdata jpa
- BZOJ-1043 [HAOI2008]下落的圆盘
- [HAOI2010][bzoj2424] 订货 [费用流]
- css的fix高度缺失
- ajax跨域两个方法
- Use Razor for Email Template outside ASP.NET MVC
- [LeetCode] Valid Number 确认是否为数值
- flashcache 介绍
- Python Challenge 第十三关