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 EXCEL 操作类代码
Jul 30 Javascript
javascript 自定义事件初探
Aug 21 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
JS实现点击Radio动态更新table数据
Jul 18 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 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缓存技术介绍
2006/11/25 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
javascript基础知识
2016/06/07 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
python中pdb模块实例用法
2021/01/15 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
物业经理求职自我评价
2013/09/22 职场文书
基督教婚礼主持词
2014/03/14 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
食品安全宣传标语
2014/06/07 职场文书
工会工作先进事迹
2014/08/18 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书