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中对于DOM的加强
Apr 11 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
js运动事件函数详解
Oct 21 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
简单了解前端渐进式框架VUE
Jul 20 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你的验证码安全码?
2007/01/02 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
PDO::query讲解
2019/01/29 PHP
任意位置显示html菜单
2007/02/01 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
python虚拟环境迁移方法
2019/01/03 Python
python求绝对值的三种方法小结
2019/12/04 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
Python识别处理照片中的条形码
2020/11/16 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
2014年清明节寄语
2014/04/03 职场文书
商务日语专业自荐信
2014/04/17 职场文书
婚纱店策划方案
2014/05/22 职场文书
运动员获奖感言
2014/08/15 职场文书
标准版离职证明书
2014/09/12 职场文书
2014年双拥工作总结
2014/11/21 职场文书
行政司机岗位职责
2015/04/10 职场文书
宣传委员竞选稿
2015/11/19 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL