DOM中的removeChild()删除一个节点，需要点击两次的问题

最新推荐文章于 2022-10-11 17:28:58 发布
最新推荐文章于 2022-10-11 17:28:58 发布
阅读量474 收藏 1
点赞数 1
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43502969/article/details/109390469
版权

js的removeChild()方法删除节点删除俩次

通过在工具中调试，发现firstChild输出的是一个#text(Chrome)或EmptyTextNode(IE&Edge),这应该是浏览器解析时出现的空白节点，也是出现两次点击的原因。


解决该问题的方法也比较简单比如上面代码中把li代码部分改为这样的形式
<li></li><li></li>几个去掉空白节点，

测试地址：菜鸟教程
在这里插入图片描述
在菜鸟教程上测试，在标签内没去除空格，第一次打印日志是“”,第二次打印是要删除的节点
在这里插入图片描述
然后删除空格之后，打印为要删除的节点
这是一个小细节，不注意的话，总以为是出bug了(狗头.jpg)

沉闷萝卜
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 学习笔记（十二） dom
12-09
3. `appendChild()`：此方法将新节点添加为现有节点的最后一个子节点。例如，`document.body.appendChild(oP);`将`<p>`元素添加到页面的`<body>`中。 4. `removeChild()`：删除指定的子节点。在`RemoveNode()`函数...
dom
03-14
1. **节点和元素**：在DOM中，每个HTML或XML元素都是一个节点，包括元素节点、文本节点、属性节点等。例如，`<div>`就是一个元素节点，而`div`中的文本是文本节点。我们可以使用`document.getElementById`或`...
DOM中删除一个节点，需要点击两次的问题
老赵学习专栏
01-29 663
&lt;body&gt;&lt;ulid="my"&gt;        &lt;li&gt;Default Nodes1&lt;/li&gt;        &lt;li&gt;Default Nodes2&lt;/li&gt;        &lt;li&gt;Default Nodes3&lt;/li&gt;    &lt;/ul&gt; 
DOM对象方法---removeChild()，insertBefore()
weixin_58123489的博客
07-23 400
一些DOM对象方法： removeChild()，insertBefore()
DOM删除指定节点 removeChild()
m0_49249339的博客
03-19 603
节点的删除和替换只能由父节点来操作 !DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> &lt...
JS事件---DOM2级事件处理：addEventListener()、removeEventListener()、attachEvent()
yhlysy的博客
07-16 633
事件处理有HTML事件处理、DOM0级事件处理、DOM2级事件处理。 HTML事件处理将事件看做标签的一个属性，与HTML混写，代码多时不容易管理。 DOM0级事件处理脚本方式添加事件，实现了HTML和JS的分离，但是它存在缺陷，例如：要为一个按钮添加点击事件，但只能为点击事件添加一个函数，不能同时添加多个函数，如果同时添加多个函数，则最后的函数将覆盖前面的函数。 DOM2级事件处理实现了H
节点操作 删除节点
m0_62962469的博客
03-15 1515
删除节点 node.removeChild(child) 从DOM中删除一个子节点 返回删除的子节点 node是父节点 child是子节点 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button">删除</button&g
dom4j1.6.1
10-25
DOM4J是Java社区中广泛使用的XML处理库，版本1.6.1是该库的一个稳定发行版。这个库提供了一套强大而灵活的API，用于解析、创建、修改和查询XML文档。以下是对DOM4J 1.6.1及其相关知识点的详细解释： 1. **XML解析**...
Dom-Array-Methods
02-13
- `map()`: 这个方法创建一个新数组，其结果是调用数组中的每个元素上的提供的函数。 - `filter()`: 用于创建一个新的数组，其中包含通过所提供函数实现的测试的所有元素。 - `forEach()`: 对数组的每个元素执行...
解析DOM
03-18
- **使用文档片段**：在大量添加或删除节点时，使用`document.createDocumentFragment`创建一个临时结构，然后一次性添加到DOM中，可以提高效率。 - **事件委托**：为父元素绑定事件处理函数，利用事件冒泡机制，...
关于removeChild删除子节点的问题！
海阔天空的专栏(web前端+LAMP)
07-23 715
XHTML代码： &lt;ul id="list"&gt; &lt;li&gt;12&lt;/li&gt; &lt;li&gt;34&lt;/li&gt; &lt;li&gt;56&lt;/li&gt; &lt;/ul&gt;   javascrtip代码： var list=document.getElementById("l
【注意】js 里面 removeChild 使用的坑
MENGCHIXIANZI的专栏
05-06 1290
这有坑啊，使用removeChild 循环删除 子元素们的时候 是【0】而不是【i】 这是因为 你每次删完一个 子元素们的 下标就会发生改变 比如 allSpan【0】 allSpan【1】 removeChild(allSpan【0】) 以后 ，allSpan【1】 就不再是allSpan【1】了，而变成了allSpan【0】； 所以需要删除allSpan【0】 N次就好了。 ...
javaScript---DOM操作
平安喜乐
10-11 602
html-DOM操作与一些案例
为什么弹窗点击了两次取消才关闭呢
肖肖肖丽珠的博客
09-23 469
可以在js里面写个打印看一下是否走了两遍。原因是你可以弹出了两个弹窗。
Javascript removeChild()删除节点及删除子节点的方法
热门推荐
qq_34093387的博客
10-14 2万+
下面给大家介绍Javascript removeChild()删除节点的方法，具体详情如下所示： 在Javascript中，只提供了一种删除节点的方法：removeChild()。 removeChild() 方法用来删除父节点的一个子节点。 语法： parent.removeChild(thisNode) 参数说明： 参数 说明 thisNode 当前节点，即要删除的节点 parent 当前节点的父节点，即 thisNode.parentNode 例如，删...
JavaScript HTML DOM removeChild删除子元素
编程界明世隐的博客
12-16 2086
removeChild 方法指定元素的某个指定的子节点，并返回被删除的节点，如果节点不存在则返回 null。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style> *{ margin:5px; pa
JavaScript：使用 removeChild 删除某个对象，一定要由父亲来执行！
helloword222的专栏
06-20 819
<br />顾名思义，removeChild 这个函数，删除的是某个对象的子对象！<br />下面的代码，点击按钮“删除2”不起作用。<br /><HTML>  <br /><HEAD>  <br /><TITLE> New Document </TITLE>  <br /><SCRIPT LANGUAGE="JavaScript"><br /> function removeDiv(divId){<br />   var oDiv = document.getElementById(divId);<br
pyqt5中treewidget添加一个节点和删除一个节点
最新发布
05-18
在 PyQt5 中，可以通过 QTreeWidget 类来创建树形控件，以下是添加一个节点和删除一个节点的示例代码： 添加节点： ```python # 创建一个 QTreeWidgetItem 对象 new_item = QtWidgets.QTreeWidgetItem() # 设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值