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. iOS开发问题之Could not instantiate class named NSLayoutConstraint

    这个问题在ios6.0之前的版本中运行会出现,因为使用Xcode 4.5之后的版本新建项目默认是选中AutoLayout的,但这个特性是在iOS6.0之后的版本中才支持的. 解决办法是选中.stroy ...

  2. 精选29款非常实用的jQuery应用插件

    今天我们来分享一些实用的jQuery应用插件,没有特别花哨,但都比较实用,jQuery菜单.jQuery图片都有涉及到,一起来看看. 1.jQuery+CSS3仿IOS无线局域网Wifi DEMO演示 ...

  3. JAVA IO NIO

    http://www.cnblogs.com/handsome1013/p/4882862.html http://www.cnblogs.com/dolphin0520/ http://www.cn ...

  4. LLVM

    http://blog.csdn.net/snsn1984/article/details/41077763

  5. Android之输入框光标和Hint的位置

    如图所示,要实现这一的需求,一般人的布局方式就是左边一button,右边一button,中间一个EditText,为了输入框的响应触摸范围更大往往不会把宽度设置为wrap_content,要么设置成m ...

  6. c和c++关于const的一些区别

    以下参考了网上的一些资料并通过程序验证. 注意,以下情况都是用gcc和g++编译器得到的结果,用vs编译器又会有所不同. 以下说下c和c++中const定义的常量的一些区别: c++中用const定义 ...

  7. ARM Linux 3.x的设备树(Device Tree)

    1. ARM Device Tree起源 Linus Torvalds在2011年3月17日的ARM Linux邮件列表宣称“this whole ARM thing is a f*cking pai ...

  8. cocos2d-x开发: 整合apache http,用于自己检索多项目svn文件

    本来我的项目都是放在自己的虚拟机svn仓库中,随着仓库越来越多,有的时候需要去查看项目文件.check out到本地之后,挨个查看也是可以的,可是check out也是需要时间的,就想起了apache ...

  9. Java知多少（下）

    Java知多少(78)Java向量(Vector)及其应用 Java知多少(79)哈希表及其应用 Java知多少(80)图形界面设计基础 Java知多少(81)框架窗口基础 Java知多少(82)标签 ...

  10. HTML注释引起的问题

    因为规范要求需要对页面进行说明,添加作者等信息,所以在cshtml的代码中添加了html注释,包括之前使用jsp也是这样做的: 在页面布局的时候,需要对高度进行动态计算,IE8以上没有问题,主要是在I ...