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 Ext JS 状态默认存储时间
Feb 15 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
利用JS实现数字增长
Jul 28 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 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图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
CSS和Javascript简单复习资料
2010/06/29 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
python实现的系统实用log类实例
2015/06/30 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
大学自我鉴定范文
2013/12/26 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
八项规定整改措施
2014/02/12 职场文书
房屋委托书范本
2014/04/04 职场文书
村委会贫困证明范本
2014/09/17 职场文书
python库sklearn常用操作
2021/08/23 Python
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL