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代码
Sep 06 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
angular分页指令操作
2017/01/09 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Python 对象中的数据类型
2017/05/13 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
Python多分支if语句的使用
2020/09/03 Python
python中使用np.delete()的实例方法
2021/02/01 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
医疗专业毕业生求职信
2014/08/28 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
瘦西湖导游词
2015/02/03 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
超市店长竞聘书
2015/09/15 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle