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 Map List 遍历使用示例
Jul 10 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
js实现炫酷光感效果
Sep 05 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常用的缓存技术汇总
2014/05/05 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
YII框架关联查询操作示例
2019/04/29 PHP
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
Python实现的ini文件操作类分享
2014/11/20 Python
常见的python正则用法实例讲解
2016/06/21 Python
Python分支结构(switch)操作简介
2018/01/17 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
一份恶作剧的检讨书
2014/09/13 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
《青山不老》教学反思
2016/02/22 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
vue里使用create, mounted调用方法
2022/04/26 Vue.js
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS