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 相关文章推荐
js中不同的height, top的区别对比
Sep 24 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 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
十天学会php之第五天
2006/10/09 PHP
php+mysql分页代码详解
2008/03/27 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
php把数组值转换成键的方法
2015/07/13 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
vue.js表格分页示例
2016/10/18 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
Python算法应用实战之栈详解
2017/02/04 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
请说出以下代码输出什么
2013/08/30 面试题
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
单位实习证明怎么写
2014/01/17 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
飞越疯人院观后感
2015/06/09 职场文书
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python