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 相关文章推荐
JS 统计时间
Mar 09 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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
浅析PHP数据导出知识点
2018/02/17 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
浅谈Django REST Framework限速
2017/12/12 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python3简单实现串口通信的方法
2019/06/12 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
python如何删除文件、目录
2020/06/23 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
什么是Assembly(程序集)
2014/09/14 面试题
公务员的自我鉴定
2013/10/26 职场文书
校长先进事迹材料
2014/02/01 职场文书
报关报检委托书
2014/04/08 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
小学重阳节活动总结
2015/03/24 职场文书