Javascript removeChild()删除节点及删除子节点的方法


Posted in Javascript onDecember 27, 2015

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

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

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

语法:

    parent.removeChild(thisNode)

参数说明:

 

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

例如,删除 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 removeChild()删除节点及删除子节点的方法

可以看出来,虽然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]); 
}

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

Javascript 相关文章推荐
ASP中Sub和Function的区别说明
Aug 30 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
ECMAScript6--解构
Mar 30 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 #Javascript
JavaScript构造函数详解
Dec 27 #Javascript
JavaScript生成二维码图片小结
Dec 27 #Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 #Javascript
Knockout自定义绑定创建方法
Dec 26 #Javascript
JavaScript动态设置div的样式的方法
Dec 26 #Javascript
JS插件overlib用法实例详解
Dec 26 #Javascript
You might like
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
javascript设计模式之迭代器模式
2020/01/30 Javascript
python获取各操作系统硬件信息的方法
2015/06/03 Python
python避免死锁方法实例分析
2015/06/04 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
什么是Assembly(程序集)
2014/09/14 面试题
毕业生求职简历的自我评价
2013/10/23 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
2014年政工师工作总结
2014/12/18 职场文书
党校学习党性分析材料
2014/12/19 职场文书
陪护人员误工证明
2015/06/24 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript