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 相关文章推荐
javascript 年月日联动实现核心代码
Dec 21 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
js Function类型
Dec 04 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
js动态切换图片的方法
Jan 20 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
微信小程序实现多图上传
Jun 19 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
php判断ip黑名单程序代码实例
2014/02/24 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
python标准算法实现数组全排列的方法
2015/03/17 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
python中return的返回和执行实例
2019/12/24 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
Aosom西班牙:家具在线商店
2020/06/11 全球购物
Java基础面试题
2014/07/19 面试题
什么是抽象
2015/12/13 面试题
车间班组长的职责
2013/12/13 职场文书
初一科学教学反思
2014/01/27 职场文书
阿凡达观后感
2015/06/10 职场文书
2019求职信大礼包
2019/05/15 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
灵能百分百第三季什么时候来?
2022/03/15 日漫
Python正则表达式中flags参数的实例详解
2022/04/01 Python