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>

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. cmd实用命令

    1.netstat 查看电脑端口状况 实际应用举例:查看某软件坚监听的电脑端口. 在任务管理器中选择列...,打开PID的显示.在这里查看某个应用程序的线程ID是多少.例如QQ:4904. 运行,cm ...

  2. Request is not available in this context

    部署到新服务器的IIS的时候发现这个错误: Request is not available in this context 解决方案: <system.web> <customEr ...

  3. Cubieboard2裸机开发之（五）看门狗操作

    前言 说到看门狗,应该不会陌生,看门狗说白了就是一个定时器,但是它有一个非常重要的功能就是复位系统.在A20里,看门狗的操作非常简单,只有两个寄存器,不需要操作时钟相关的东西,系统起来后可以直接使用, ...

  4. android自定义RadioGroup实现可以添加多种布局

    android自带的RadioGroup是继承自LinearLayout,如果布局的时候不是直接写radiobutton,即radiobutton外面还包了一层容器,这时分组是不成功的,因为查找不到r ...

  5. WPF读写config配置文件

    1. 在你的工程中,添加app.config文件.文件的内容默认为: 1 <?xml version="1.0" encoding="utf-8" ?&g ...

  6. CentOS 6.5 Python 2.6.6+Flask 用wsgi方式部署在Apache 2.2.15下

    1,安装wsgi Apache模块 easy_install mod_wsgi 2,添加/etc/httpd/conf.d/wsgi.conf LoadModule wsgi_module modul ...

  7. Eplan转载

    引言:标准化工程设计理念成功实施后之后,清晰透明的管理流程将水到渠成,过往繁复无比的流程得以简化,管理与被管理者皆愿欣然承受. 市场竞争日趋激烈的今天,对用户需求.市场的快速响应,尽量地控制成本是企业 ...

  8. 编译安装 LLVM

    本文记录 LLVM 的安装过程,比较繁琐,使用 LLVM 3.4 操作系统:CentOS 6.6 64 位 1. 下载需要的软件 相关软件下载地址:http://llvm.org/releases/d ...

  9. 二十五、【开源】EFW框架Winform前端开发之强大的自定义控件库

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...

  10. 让文档和Demo生成更加简单和强大 - SmartDoc 0.1.1 说明

    新特性 smartDoc 0.1.1版正式发布,其中加入了更多方便生成文档的功能,主要特性如下: * 加入@demo配置项,看可以动态抓取html和js的内容作为@example,同时支持扩展@dem ...