Javascript removeChild()不能删除全部子节点的解决办法

在Javascript中,只提供了一种删除节点的方法:removeChild()。
removeChild() 方法用来删除父节点的一个子节点。

语法:

    parent.removeChild(thisNode)

参数说明:

参数 说明
thisNode 当前节点,即要删除的节点
parent 当前节点的父节点,即 thisNode.parentNode

例如,删除 id="demo" 的节点的语句为:

1 var thisNode=document.getElementById("demo");

2 thisNode.parentNode.removeNode(thisNode); 
举例,删除节点:

复制代码
1 <div id="demo">
2 <div id="thisNode">点击删除我</div>
3 </div>
4 <script type="text/javascript">
5 document.getElementById("thisNode").onclick=function(){
6 this.parentNode.removeChild(this);
7 }
复制代码

可以看出来,虽然Javascript只提供了一种删除节点的方法,但是足够用了。
ps:JavaScript删除子节点的方法
HTML代码如下:

<div id="f"> 
<div>a</div> 
<div>b</div> 
<div>c</div> 
</div>

如果想删除f节点下的所有子节点,很自然也很正常想到的方法应该就是下面的这段代码了:

复制代码
1 var f = document.getElementById("f"); 
2 var childs = f.childNodes; 
3 for(var i = 0; i < childs.length; i++) { 
4   alert(childs[i].nodeName); 
5   f.removeChild(childs[i]); 
6 }
复制代码

当程序运行后我们发现无论在FireFox还是在IE下,均不能完全的删除所有的子节点(FireFox中把空白区域也
当成节点,所以删除结点的结果会不一样的),这是因为当你把索引为0的子节点删除后那么很自然的原来索引
为1节点此时它的索引变成0了,而这时变量i已经变成1了,程序继续走时就会删除原先索引为2的现在为1的节点,
这样程序运行的结果就是只删除了一半的子节点,用for in遍历结果也是一样的。想正常的删除全部节点
的话,我们应该从后面往前删除,代码如下:

for(var i = childs.length - 1; i >= 0; i--) { alert(childs[i].nodeName); f.removeChild(childs[i]); 
}

我们从索引最大值开始删除,采用递减的方法,这样索引便不会移动改变了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/353988.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

CSDN 每日一练用例数据缺失了怎么办?

CSDN 每日一练用例数据缺失了怎么办&#xff1f; 引子1、用例与结果不匹配2、阅读理解困难3、用例数据缺失 用例数据缺失&#xff0c;却有人 AC &#xff1f;神奇的 c28761 津津的储蓄计划70093 近视的小张 小结最后的吐槽 引子 老顾最近几个月经常在 CSDN 举办的周赛上浑水摸…

Spring中bean的初始化和销毁几种实现方式详解

关联博文&#xff1a;Spring中Bean的作用域与生命周期 Bean的生命周期 &#xff1a; 创建bean对象 – 属性赋值 – 初始化方法调用前的操作 – 初始化方法 – 初始化方法调用后的操作 – …-- 销毁前操作 – 销毁方法的调用。 先放一张图吧。 【1】init-method和destroy-me…

js-removeChild()

下面给大家介绍Javascript removeChild()删除节点的方法&#xff0c;具体详情如下所示&#xff1a; 在Javascript中&#xff0c;只提供了一种删除节点的方法&#xff1a;removeChild()。 removeChild() 方法用来删除父节点的一个子节点。 语法&#xff1a; parent.removeCh…

删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功&#xff0c;此方法可返回被删除的节点&#xff0c;如失败&#xff0c;则返回 NULL。 语法: nodeObject.removeChild(node) 参数: node &#xff1a;必需&#xff0c;指定需要删除的节点。 我们来看看下面代码&a…

Js removeChild、addChild

1. <html><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8"><title>添加删除记录练习升级</title><link rel"stylesheet" type"text/css" href"ex_2_style/css.css&qu…

【注意】js 里面 removeChild 使用的坑

这有坑啊&#xff0c;使用removeChild 循环删除 子元素们的时候 是【0】而不是【i】 这是因为 你每次删完一个 子元素们的 下标就会发生改变 比如 allSpan【0】 allSpan【1】 removeChild(allSpan【0】) 以后 &#xff0c;allSpan【1】 就不再是 allSpan【1】了&#xff0c;…

关于removeChild() 方法

removeChild() 方法 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术&#xff1a; JS 撰写时间&#xff1a;2021/7/8 注意红色箭头指向内容&#xff0c;本文将分为6张图片&#xff0c;并按从上到下顺序操作 1.我们先简…

4.C++多线程-- unique_lock(类模板)

1.unique_lock 1. unique_lock<mutex> myUniLock(myMutex); 完全可以取代lock_guard 2. unique_lock 也可以使用----std::adopt_lock 3.使用adopt_lock&#xff0c;之前要先使用lock. 4.std::chrono::milliseconds my_sleepTime(20000)//20000毫秒 std::this_thread:…

打开浏览器的同时会在主页外同时打开芒果TV,抖音等网站

问题&#xff1a;每次打开谷歌浏览器的同时会同时打开芒果TV&#xff0c;抖音等网站。导致每次都要进行网页关闭&#xff0c;非常麻烦。 解决&#xff1a;在扩展程序中有一个叫做“省钱购”的程序&#xff0c;只需要将其移走就可以了。 扩展程序的位置&#xff1a;自定义及控…

最新超漂亮UI仿芒果TV听书网站模板双端+苹果CMS内核

正文: 苹果cms超漂亮UI高仿芒果TV听书网站模板带手机端。 手机版修改logo&#xff0c;ting_wap/images/logo.png 电脑版修改logo&#xff0c;ting_pc/img/logo.png 编辑推荐后台推荐5颗星&#xff0c;新势力/热播榜单后台推荐9颗星。 程序: wwyfeu.lanzoum.com/iQ0F00gbt…

芒果播放器介绍

芒果播放器 芒果全能播放器能播放所有格式的视频、音频文件、以及主流图片文件。短小精悍、简洁明了、绿色&#xff0c;无广告&#xff0c;其FLASH播放比暴风音影更真实。原本为教育教学服务&#xff0c;广大师生反应较好&#xff0c;现全面推广。 【1.1版下载地址】 http://…

非常简单下载芒果tv视频的方法(无需安装任何软件)

1、打开芒果tv网站&#xff0c;找到需要下载的视频地址比如&#xff1a;https://www.mgtv.com/b/328606/5533377.html?fpase 2、打开网页&#xff1a;https://www.parsevideo.com/mgtv/ 3、输入需要分析的视频地址&#xff1a; 4、分析结果如下&#xff0c;并点击第二行的下…

最新芒果TV视频下载方法-马赛克视频助手

芒果TV是一款资源丰富的互联网视频平台。它除了可以看视频外&#xff0c;还可以将这些视频下载下来。但官方是不支持视频下载的&#xff0c;那么芒果TV该怎么下载视频么&#xff1f;接下来就让我们一起去看看吧。 今天小编就教大家如何把上面喜欢的视频下载下来 1.这里我们需…

芒果TV 2021 互联网人才招聘

长沙&#xff0c;关键词是什么&#xff1f; 小龙虾、臭豆腐 马栏山 中国最具幸福感城市 芒果TV&#xff0c;关键词是什么&#xff1f; 天生青春&#xff0c;NO.1 中国互联网百强 世界媒体五百强 理想&#xff0c;非得在北上广实现么&#xff1f; 其实&#xff0c;追梦的路上不一…

Android TV 开发之 TV视频播放器

Android TV视频播放器VideoView 不想往下看可以直接在GitHub上面克隆到自己的项目中 GitHub地址 闲谈 最近公司又给了一个新任务&#xff0c;说要做电视机顶盒开发&#xff0c;这个机顶盒开发之前也没有接触过啊&#xff0c;没经验&#xff0c;这使我走了很多坑&#xff0c;写…

芒果TV会员,月卡最低9.9元,年卡最低128元!

全国首部湘商题材电视剧《一代洪商》&#xff0c;将于3月27日在央视八套&#xff08;电视剧频道&#xff09;播出&#xff0c;芒果TV将线上播出。该剧由王少华编剧&#xff0c;路奇担纲导演&#xff0c;孟凡耀担任总制片人&#xff0c;张丰毅、李立群、张睿、张含韵等人主演&am…

芒果tv官网服务器维护,芒果tv看不了【解决方案】

win7系统有很多人都喜欢使用,我们操作的过程中常常会碰到win7系统芒果tv看不了的问题。如果遇到win7系统芒果tv看不了的问题该怎么办呢&#xff1f;很多电脑水平薄弱的网友不知道win7系统芒果tv看不了究竟该怎么解决&#xff1f;其实不难根据下面的操作步骤就可以解决问题1.DNS…

jquery mini下载_【芒果tv湖南卫视直播】-芒果TV播放器下载v6.3.4 官方正式版

芒果tv湖南卫视直播电脑版最近也改版更新了&#xff0c;在西西在认识中这些媒体一般是不会重视客户端这块的&#xff0c;新版比旧版大了不少&#xff0c;因此软件的版面也是大气了很多&#xff0c;不过对于用户来说只要能及时的观看湖南卫视的节目已经热播的电视剧就OK了哦。芒…

芒果Tv服务器维护,芒果tv怎么看直播?芒果tv直播看不了怎么办?

芒果tv怎么看直播 芒果TV是湖南卫视新媒体金鹰网旗下的网络电视播放器&#xff0c;为用户提供包括电视剧、电影、电视节目、新闻纪实、音乐等多种类型的点播服务。那么芒果tv怎么看直播? 1.打开【芒果TV】&#xff0c;往左划动上方的导航栏。 2.点击【直播】&#xff0c;这里就…