JavaScript中removeChild 方法开发示例代码


Posted in Javascript onAugust 15, 2016

1. 概述

删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置。

当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

2. example

<!DOCTYPE html>
<html>
<head>
</script>
</head>
<body>
<ul id="test-list">
<li>JavaScript</li>
<li>Swift</li>
<li>HTML</li>
<li>ANSI C</li>
<li>CSS</li>
<li>DirectX</li>
</ul>
<script>
var p= document.getElementById('test-list');
var length = p.children.length;
var i=0;
for(; i<length; ){
var li = p.children[i];
var text = li.innerText;
if(text!=='JavaScript' && text!=='HTML' && text!=='CSS'){
p.removeChild(li);
alert(p.children.toString());
length--;
}else{
i++;
}
}
// 测试:
;(function () {
var
arr, i,
t = document.getElementById('test-list');
if (t && t.children && t.children.length === 3) {
arr = [];
for (i = 0; i < t.children.length; i ++) {
arr.push(t.children[i].innerText);
}
if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
alert('测试通过!');
}
else {
alert('测试失败: ' + arr.toString());
}
}
else {
alert('测试失败!');
}
})();
</script>
</body>
</html>

以上所述是小编给大家介绍的JavaScript中removeChild 方法开发示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript简易缓动插件(源码打包)
Feb 16 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
JS实现手风琴特效
Nov 08 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 #Javascript
Web安全测试之XSS实例讲解
Aug 15 #Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 #Javascript
卸载安装Node.js与npm过程详解
Aug 15 #Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 #Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 #Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 #Javascript
You might like
解析数组非数字键名引号的必要性
2013/08/09 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
饭店工作计划书
2014/01/10 职场文书
致共产党员倡议书
2014/04/16 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
新党章的学习心得体会
2014/11/07 职场文书