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基本类型与引用类型
May 28 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 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
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
javascript随机显示背景图片的方法
2015/06/18 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
使用Python对Csv文件操作实例代码
2017/05/12 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
python脚本定时发送邮件
2020/12/22 Python
python实现KNN近邻算法
2020/12/30 Python
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
小学家长评语大全
2014/04/16 职场文书
绿色环保标语
2014/06/12 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
创业计划书之面包店
2019/09/12 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB