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 实用小技巧
Apr 07 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 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之第十天
2006/10/09 PHP
聊天室php&amp;mysql(二)
2006/10/09 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
微信小程序实现弹出菜单功能
2018/06/12 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python实现简单的四则运算计算器
2016/11/02 Python
Python3 中文文件读写方法
2018/01/23 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
python pycharm的安装及其使用
2019/10/11 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
python链表类中获取元素实例方法
2021/02/23 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
经典c++面试题五
2014/12/17 面试题
音乐表演专业毕业生求职信
2013/10/14 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
实践单位评语
2014/04/26 职场文书
无房证明范本
2014/09/17 职场文书
初中团支书竞选稿
2015/11/21 职场文书