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 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
jquery默认校验规则整理
Mar 24 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
jQuery异步提交表单实例
May 30 jQuery
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
python 实现登录网页的操作方法
2018/05/11 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
班队活动设计方案
2014/01/30 职场文书
业务总经理岗位职责
2014/02/03 职场文书
新法人代表任命书
2014/06/06 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
pytorch实现手写数字图片识别
2021/05/20 Python
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫