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 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 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中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
CI框架常用函数封装实例
2016/11/21 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python中的变量如何开辟内存
2018/06/26 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
零基础小白多久能学会python
2020/06/22 Python
python在协程中增加任务实例操作
2021/02/28 Python
车间副主任岗位职责
2013/12/24 职场文书
中班幼儿评语大全
2014/04/30 职场文书
物业消防安全责任书
2014/07/23 职场文书
个人主要事迹材料
2014/08/26 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL
Python 统计序列中元素的出现频度
2022/04/26 Python
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS