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 16 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
js中开关变量使用实例
Feb 24 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
微信小程序点击滚动到指定位置的实现
May 22 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的小经验 完美解决乱码问题
2013/06/10 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
通过cmd进入python的实例操作
2019/06/26 Python
python获取txt文件词向量过程详解
2019/07/05 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
房地产销售员的自我评价分享
2013/12/04 职场文书
社区八一活动方案
2014/02/03 职场文书
个人简历中自我评价
2014/02/11 职场文书
设计专业自荐信
2014/06/19 职场文书
同学聚会通知短信
2015/04/20 职场文书
拉贝日记观后感
2015/06/05 职场文书