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的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
JS中的phototype详解
Feb 04 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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把大写命名转换成下划线分割命名
2015/04/27 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
Yii2中datetime类的使用
2016/12/17 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python缩进区别分析
2014/02/15 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
python操作yaml说明
2020/04/08 Python
python中如何打包用户自定义模块
2020/09/23 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
Android面试宝典
2013/08/06 面试题
安全检查与奖惩制度
2014/01/23 职场文书
小学班级特色活动方案
2014/08/31 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android
Python实现滑雪小游戏
2021/09/25 Python
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技