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. Hybris电商方案介绍(企业全渠道) B2B B2C O2O建设

    1). 什么是Hybris: hybris software成立于1997年,2013年与SAP整合,成为SAP旗下的一份子,提供全渠道客户互动与商务解决方案,该解决方案能够为各机构提供客户的实时背景 ...

  2. 在Unity3D的网络游戏中实现资源动态加载

    用Unity3D制作基于web的网络游戏,不可避免的会用到一个技术-资源动态加载.比如想加载一个大场景的资源,不应该在游戏的开始让用户长时间等待全部资源的加载完毕.应该优先加载用户附近的场景资源,在游 ...

  3. HTML5新特性之跨文档消息传输

    1.同域限制 所谓“同域限制”是指,出于安全考虑,浏览器只允许脚本与同样协议.同样域名.同样端口的地址进行通信. 2.window.postMessage方法 浏览器限制不同窗口(包括iFrame窗口 ...

  4. [转]android开发之字节顺序

    原文在此 android上C++程序为小端字节顺序,和windows上一样. 而android上的JAVA程序则使用的是大端字节顺序. 用NDK和java SDK 做android程序时发现的问题,记 ...

  5. HiKey连接

    http://wiki.lemaker.org/LeMaker_Hikey:FAQ/zh-hans

  6. git 在提交之前撤销add操作

    问题 在使用git时,在未添加.ignore文件前使用 git add . 将所有文件添加到库中,不小心将一些不需要加入版本库的文件加到了版本库中.由于此时还没有提交所以不存在HEAD版本,不能使用 ...

  7. 【Android】键盘的展开和收起

    键盘的展开和收起主要使用到类InputMethodManager:http://developer.android.com/reference/android/view/inputmethod/Inp ...

  8. Tomcat自动部署

    在Tomcat的server.xml配置文件中部署 1.在Tomcat下,找到conf文件下的server.xml,打开. 2.在<Host>和</host>之间加上如下代码: ...

  9. c++ 全局变量初始化的一点总结

    注意:本文所说的全局变量指的是 variables with static storage,措词来自 c++ 的语言标准文档. 什么时候初始化 根据 C++ 标准,全局变量的初始化要在 main 函数 ...

  10. 有了Hadoop MapReduce, 为什么还要Spark?

    a. 由于MapReduce的shuffle过程需写磁盘,比较影响性能:而Spark利用RDD技术,计算在内存中进行. b. MapReduce计算框架(API)比较局限, 而Spark则是具备灵活性 ...