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现实多行信息
Aug 26 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
javascript实现弹幕墙效果
Nov 28 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
utf8的编码算法 转载
2006/12/27 Javascript
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
javascript  Error 对象 错误处理
2008/05/18 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
深入理解React高阶组件
2017/09/28 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
python矩阵转换为一维数组的实例
2018/06/05 Python
python使用folium库绘制地图点击框
2018/09/21 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
《七颗钻石》教学反思
2014/02/28 职场文书
建国大业观后感
2015/06/01 职场文书
600字作文之感受大自然
2019/11/27 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android