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. php中并发读写文件冲突的解决方案(文件锁应用示例)

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

  2. web app变革之rem（手机屏幕实现全适配）

    以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...

  3. win7 VS2012+openCV-2.4.11 配置

    1.下载 http://opencv.org/downloads.html (根据版本的不同选择,这里选择的是opencv-2.4.11) 2.安装 3.环境变量配置 计算机->属性->高 ...

  4. kail2在虚拟机上的安装

    首先先要安装虚拟机,打开安装包,下一步               选择典型 选择要安装到的目录,点下一步 4 输入密钥,下一步(密钥网上有很多我这边就例举一个,没用的话就自己找.我这个密钥是VM11 ...

  5. 何为.Net Remoting【转】

    借助基维百科给它的定义如下: NET Remoting 是微软 .NET Framework 中的一种网络通讯技术,与 XML Web Service 不同的是,它可以使用 SOAP 以外的协定来通讯 ...

  6. ux.plup.File plupload 集成 ux.plup.FileLis 批量上传预览

    //plupload 集成 Ext.define('ux.plup.File', { extend: 'Ext.form.field.Text', xtype: 'plupFile', alias: ...

  7. 谷歌正式发布Google APIs Client Library for .NET

    好消息,特大好消息! 英文原文:Google API library for .NET paves the way for Google services on Windows phone 本月 17 ...

  8. 模拟MessageBox

    原文:<模拟MessageBox> Posted on 2014/01/07 ======================================================= ...

  9. AssetBundle系列——游戏资源打包（二）

    本篇接着上一篇.上篇中说到的4步的代码分别如下所示: (1)将资源打包成assetbundle,并放到自定目录下 using UnityEditor; using UnityEngine; using ...

  10. String详解, String和CharSequence区别, StringBuilder和StringBuffer的区别 (String系列之1)

    本章主要介绍String和CharSequence的区别,以及它们的API详细使用方法. 转载请注明出处:http://www.cnblogs.com/skywang12345/p/string01. ...