1. 概述

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

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

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

2. example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </script>
  5. </head>
  6. <body>
  7. <ul id="test-list">
  8.     <li>JavaScript</li>
  9.     <li>Swift</li>
  10.     <li>HTML</li>
  11.     <li>ANSI C</li>
  12.     <li>CSS</li>
  13.     <li>DirectX</li>
  14. </ul>
  15. <script>
  16. var p= document.getElementById('test-list');
  17. var length = p.children.length;
  18. var i=0;
  19. for(; i<length;  ){
  20.     var li = p.children[i];
  21.     var text = li.innerText;
  22.     if(text!=='JavaScript' && text!=='HTML' && text!=='CSS'){
  23.  
  24.        p.removeChild(li);
  25.        alert(p.children.toString());
  26.        length--;
  27.     }else{
  28.        i++;
  29.     }
  30. }
  31. // 测试:
  32. ;(function () {
  33.     var
  34.         arr, i,
  35.         t = document.getElementById('test-list');
  36.     if (t && t.children && t.children.length === 3) {
  37.         arr = [];
  38.         for (i = 0; i < t.children.length; i ++) {
  39.             arr.push(t.children[i].innerText);
  40.         }
  41.         if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
  42.             alert('测试通过!');
  43.         }
  44.         else {
  45.             alert('测试失败: ' + arr.toString());
  46.         }
  47.     }
  48.     else {
  49.         alert('测试失败!');
  50.     }
  51. })();
  52. </script>
  53. </body>
  54. </html>

js removeChild 方法的更多相关文章

  1. js实用方法记录-js动态加载css、js脚本文件

    js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...

  2. js调用php和php调用js的方法举例

    js调用php和php调用js的方法举例1 JS方式调用PHP文件并取得php中的值 举一个简单的例子来说明: 如在页面a.html中用下面这句调用: <script type="te ...

  3. 通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法

    jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...

  4. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. jQuery 互相调用iframe页面中js的方法

    1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...

  6. JS扩展方法——字符串trim()

    转自:http://www.cnblogs.com/kissdodog/p/3386480.html <head> <title>测试JS扩展方法</title> ...

  7. Js apply 方法 详解

    Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  8. JavaScript基础12——js的方法重载

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JS replace()方法-字符串首字母大写

    replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. replace()方法有两个参数,第一个参数是正则表达式,正则表达式如果带全局标志/g,则是代表替换 ...

随机推荐

  1. CentOS安装keepalived

    Haproxy.Keepalived双主高可用负载均衡  1.安装keepalived yum install keepalived -y

  2. JDBC性能分析与优化

    JDBC性能分析与优化V1.0http://www.docin.com/p-758600080.html

  3. php中并发读写文件冲突的解决方案(文件锁应用示例)

    PHP(外文名: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言.语法吸收了C语言.Java和Perl的特点,入门门槛较低,易于学习,使用广泛,主要适 ...

  4. Ubuntu 16.04 LTS更新

    Canonical今天正式发布了新版的Ubuntu系统,针对PC.笔记本.上网本.平板和智能手机各类设备.这次的Ubuntu 16.04代号为Xenial Xerus——这个代号是由Canonical ...

  5. Apache2.4中开通HTTP基本认证

    Apache2.4中开通HTTP基本认证,需要在Apache的配置文件中增加如下代码 WSGIPassAuthorization On 否则则无法认证

  6. 如何重置CentOS 7的Root密码？设置CentOS 7的Root密码的方法与步骤

  7. MSIL解析一（转）

    转自:http://www.cnblogs.com/Yahong111/archive/2007/08/15/857140.html 在网上发现了一个非常好的MSIL教程,可惜是英文版的,于是就翻译了 ...

  8. java面试欠缺知识点总结

    针对最近面试被问到的问题,总结自己欠缺的知识点,并要在接下来的1年内加强这些知识: Java方面:反射.线程concurrent包: Spring方面:Ioc和Aop.事务: 持久化框架:设计并实现分 ...

  9. position 属性和 z-index 属性对页面节点层级影响的例子

    转:http://www.neoease.com/tutorials/z-index/ 不设 z-index 属性 单层节点 双层节点 多层节点

  10. Exchange Server简介与搭建

    一.Exchange Server简介Exchange Server 是微软公司的一套电子邮件服务组件,是个消息与协作系统. 简单而言,Exchange server可以被用来构架应用于企业.学校的邮 ...