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 相关文章推荐
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
js实现上传图片并显示图片名称
Dec 18 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 深入理解strtotime函数的使用详解
2013/05/23 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
vue-axios使用详解
2017/05/10 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
python处理大数字的方法
2015/05/27 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
django定期执行任务(实例讲解)
2017/11/03 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
Python的垃圾回收机制详解
2019/08/28 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
Python列表如何更新值
2020/05/27 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
高二化学教学反思
2014/01/30 职场文书
网站出售协议书范文
2014/10/10 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
带你学习MySQL执行计划
2021/05/31 MySQL
SpringRetry重试框架的具体使用
2021/07/25 Java/Android