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 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
JS async 函数的含义和用法实例总结
Apr 08 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Keras搭建自编码器操作
2020/07/03 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
会计助理的岗位职责
2013/11/29 职场文书
职称评定自我鉴定
2014/03/18 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
小学感恩节活动总结
2015/03/24 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技