js-removeChild()

下面给大家介绍Javascript removeChild()删除节点的方法,具体详情如下所示:

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

removeChild() 方法用来删除父节点的一个子节点。

语法:

parent.removeChild(thisNode)

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

var thisNode=document.getElementById("demo");
thisNode.parentNode.removeNode(thisNode);

举例,删除节点:

<div id="demo"><div id="thisNode">点击删除我</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){this.parentNode.removeChild(this);
}
</script>

实例演示:

在这里插入图片描述

可以看出来,虽然Javascript只提供了一种删除节点的方法,但是足够用了。

ps:JavaScript删除子节点的方法

HTML代码如下:

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

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

var f = document.getElementById("f"); 
var childs = f.childNodes; 
for(var i = 0; i < childs.length; i++) { alert(childs[i].nodeName); f.removeChild(childs[i]); 
}

当程序运行后我们发现无论在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/353983.html

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

相关文章

删除节点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;这里就…

芒果tv视频抓包分析

今天遇到个朋友问我怎么下载芒果tv的蓝光视频&#xff0c;说她也有芒果tv的会员&#xff0c;但是用网上的一些软件下载下来的视频很模糊&#xff0c;根本不是什么蓝光1080p的&#xff0c;所以我们今天就来分析下芒果tv的蓝光视频怎么下载 1.还是老规矩&#xff0c;打开我们的马…

芒果TV 平板端 以EPG(IPTV)形式复刻

技术介绍 使用View-App框架&#xff08;单页面&#xff09;实现交互Web端&#xff0c;使用阿里web播放IPTV端&#xff0c;使用机顶盒播放器使用webpack打包&#xff0c;兼容es5及之前版本功能方面&#xff0c;暂未使用第三方库 项目地址 项目效果&#xff1a;部署地址View-A…

为什么显示芒果tv服务器异常怎么办,芒果tv打不开怎么办 芒果tv打不开解决方法...

大家经常使用芒果tv看电视直播或者热播电视剧&#xff0c;小编也不例外&#xff0c;相信有的朋友遇到过芒果tv打不开的情况。下面小编就为大家分享几个芒果tv打不开的解决方法 原因一&#xff1a;DNS服务器被劫持导致芒果TV直接打不开。 1、如图所示&#xff0c;点击运行——输…