脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js removechild

JavaScript中removeChild 方法开发示例代码

 更新时间：2016年08月15日 15:10:19   作者：fangfan  
这篇文章主要介绍了JavaScript中removeChild 方法开发示例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下

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 方法开发示例代码，希望对大家有所帮助,如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • JS模拟Dialog弹出浮动框效果代码

    JS模拟Dialog弹出浮动框效果代码

    这篇文章主要介绍了JS模拟Dialog弹出浮动框效果代码,涉及JavaScript可拖动窗口的创建及布局相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 微信小程序实现时间戳格式转换

    微信小程序实现时间戳格式转换

    这篇文章主要为大家详细介绍了微信小程序实现时间戳格式转换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-07-07
  • js调用打印机打印网页字体总是缩小一号的解决方法

    js调用打印机打印网页字体总是缩小一号的解决方法

    直接调用window.print()，但是打印出来后，字体总是缩小一号,后来直接target="_blank"，就可以正常打印了，下面是实现代码
    2014-01-01
  • JavaScript实现单点登录的示例

    JavaScript实现单点登录的示例

    这篇文章主要介绍了JavaScript实现单点登录的示例，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
    2020-09-09
  • JS Tween 颜色渐变

    JS Tween 颜色渐变

    从我写的as tween改写的，基本功能跟as里面写的一样，只是没有扩展特定功能的接口（比如alpha2，move2，size2，color2等接口,这些在as tween里面都有实现）。
    2008-12-12
  • JS实现悬浮球只在一侧滑动并且是横屏状态下

    JS实现悬浮球只在一侧滑动并且是横屏状态下

    这篇文章主要介绍了JS实现悬浮球只在一侧滑动 并且是横屏状态下,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-08-08
  • JavaScript实现鼠标悬浮页面切换效果

    JavaScript实现鼠标悬浮页面切换效果

    这篇文章主要为大家详细介绍了JavaScript实现鼠标悬浮页面切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 各浏览器对document.getElementById等方法的实现差异解析

    各浏览器对document.getElementById等方法的实现差异解析

    这篇文章主要是对各浏览器对document.getElementById等方法的实现差异进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • 浅谈JavaScript 中有关时间对象的方法

    浅谈JavaScript 中有关时间对象的方法

    下面小编就为大家带来一篇浅谈JavaScript 中有关时间对象的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • javascript 扫雷游戏

    javascript 扫雷游戏

    最近心血来潮，用JavaScript实现了Windows自带的扫雷游戏。当前只实现了基本功能，还有一个缺点就是只能在IE上正常运行，估计是事件没有处理好。
    2009-05-05

最新评论