JavaScript的removeChild()函数用法详解


Posted in Javascript onDecember 27, 2015

removechild 函数可以删除父元素的指定子元素。

如果此函数删除子节点成功,则返回被删除的节点,否则返回null。

语法结构:

fatherObj.removeChild(childrenObj)

参数解释:

1.fatherObj:要删除子元素的元素对象。
2.childrenObj:要被删除的子元素对象。

特别说明:

在火狐、谷歌和IE8以上浏览器中,空白也算是一个文本节点,但是在IE8和IE8以下浏览器中会忽略空白文本节点,具体可以参阅javascript如何获取元素的子节点和父节点 一章节。

代码实例:

实例一:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://3water.com/" />
<title>三水点靠木</title>
<script type="text/javascript">
window.onload=function(){
 var obox=document.getElementById("box");
 var lis=obox.getElementsByTagName("li");
 obox.removeChild(lis[1]);
}
</script>
</head>
<body>
<ul id="box">
 <li>三水点靠木一</li>
 <li>三水点靠木二</li>
 <li>三水点靠木三</li>
 <li>三水点靠木四</li>
</ul>
</body>
</html>

以上代码可以删除box的子元素中的第二个li元素。

实例二:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>三水点靠木</title>
<script type="text/javascript">
window.onload=function(){
 var obox=document.getElementById("box");
 var liArray=[];
 var y=0;
 var childNodes=obox.childNodes;
 for(var i=0;i<childNodes.length;i++){
  if(childNodes[i].nodeType==1){
   liArray[y]=childNodes[i];
   y=y+1;
  }
 }
 obox.removeChild(liArray[1]);
}
</script>
</head>
<body>
<ul id="box">
 <li>三水点靠木一</li>
 <li>三水点靠木二</li>
 <li>三水点靠木三</li>
 <li>三水点靠木四</li>
</ul>
</body>
</html>

以上代码可以从box中所有子节点中选取元素节点,然后将元素节点放入数组,然后再删除第二个元素节点。

总结:

removeChild()

这个函数是得到元素的父元素,进行删除的。语法形式为:parent.removeChild(child);

有时候我们希望在不涉及父元素的情况下进行删除。但是DOM 就是这个机制,必须明确元素和父元素才能进行删除。在进的到要删除的元素时,我们也是可以进行删除操作的,利用其 parentNode 属性来找到父元素:

var child=document.getElementById(p1);
child.parentNode.removeChild(child);

注意:jquery也有功能与removeChild相对应的函数:remove()和empty()

remove():是指将自己本身和子元素均删除

empty():是删除子元素

Javascript 相关文章推荐
JavaScript实用技巧(一)
Aug 16 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 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
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 #Javascript
You might like
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
Python hmac模块使用实例解析
2019/12/24 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
介绍一下Java中的Class类
2015/04/10 面试题
厨师长岗位职责
2014/03/02 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
2015年宣传工作总结
2015/04/08 职场文书
女方离婚起诉书
2015/05/18 职场文书
保外就医申请书范文
2015/08/06 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android