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. swift 如何删除subviews

    scrollView.subviews.map { (var view) -> () in if (view is UIButton) { view.removeFromSuperview() ...

  2. 查看JAVA进程中哪个线程CPU消耗最高

    一,在centos linux 上查看进程占用cpu过高 top  shift+h 查看哪个进程程消耗最高     二,查看JAVA进程中哪个线程消耗最高   2.1 导出java运行的线程信息   ...

  3. VirtualBox中安装CentOS-6.6虚拟机

    1. 下载 可以到官网下载,http://mirror.centos.org/centos/ 如果下载速度太慢的话,也可以到163镜像下载: http://mirrors.163.com/centos ...

  4. 基于soapUI构建WebService测试框架

    基于soapUI构建WebService测试框架 http://www.docin.com/p-775523285.html

  5. Codeforces Round #195 A B C 三题合集 (Div. 2)

    A 题 Vasily the Bear and Triangle 题目大意 一个等腰直角三角形 ABC,角 ACB 是直角,AC=BC,点 C 在原点,让确定 A 和 B 的坐标,使得三角形包含一个矩 ...

  6. 读书笔记_Effective_C++_条款四十二：了解typename的双重意义

    顾名思义,typename有双重含意.只要你用过template,那么第一重含意一定知道,那就是声明模板的时候,我们既可以这样写: template <class T> 也可以这样写 te ...

  7. 【转】Linux 概念架构的理解

    转:http://mp.weixin.qq.com/s?__biz=MzA3NDcyMTQyNQ==&mid=400583492&idx=1&sn=3b18c463dcc451 ...

  8. rails利用big_sitemap生成sitemap

    # Gemfile gem 'big_sitemap' # lib/tasks/sitemap.rake require 'big_sitemap' namespace :custom do desc ...

  9. Entity Framework访问MySQL数据库的存储过程并获取返回值

      一.创建MySql存储过程 1, CREATE PROCEDURE `InsertAlarmInfo`(in businessindex int, in providerindex int, in ...

  10. excel导入记录

    use DangJianSELECT vale1, value2 into Table2 from Table1 select COUNT(*) from tmpdangyuan where 手机号 ...