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写的一个DIV 弹出网页对话框
Aug 14 Javascript
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
微信小程序自定义组件
Aug 16 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
d3.js实现图形拖拽
Dec 19 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获取excel文件数据
2017/04/21 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
对Python中的@classmethod用法详解
2018/04/21 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Python线程threading模块用法详解
2020/02/26 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
python实现人像动漫化的示例代码
2020/05/17 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
什么是Web Service?
2012/07/25 面试题
开朗女孩的自我评价
2014/02/10 职场文书
留学经费担保书
2014/05/12 职场文书
综治工作心得体会
2014/09/11 职场文书
无房证明范本
2014/09/17 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers