JavaScript中removeChild 方法开发示例代码

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>

以上所述是小编给大家介绍的JavaScript中removeChild 方法开发示例代码，希望对大家有所帮助,如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js removeChild 方法深入理解

    1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove

  • Javascript removeChild()删除节点及删除子节点的方法

    Javascript removeChild()删除节点及删除子节点的方法

    下面给大家介绍Javascript removeChild()删除节点的方法,具体详情如下所示: 在Javascript中,只提供了一种删除节点的方法:removeChild(). removeChild() 方法用来删除父节点的一个子节点. 语法: parent.removeChild(thisNode) 参数说明: 参数 说明 thisNode 当前节点,即要删除的节点 parent 当前节点的父节点,即 thisNode.parentNode 例如,删除 id="demo" 的节

  • javascript移出节点removeChild()使用介绍

    removeChild(a)是用来删除文档中的已有元素 参数a:要移出的节点 复制代码 代码如下: <div id="guoDiv"> <span>1</span> <span>2</span> <span>3</span> </div> var oDiv = document.getElementById("guoDiv"); var firsChild = oDiv.

  • js removeChild 障眼法 可能出现的错误

    有结构: 复制代码 代码如下: <ul id="demo"> <li>a</li> <li>b</li> <li>c</li> </ul> 如果运行代码1: 复制代码 代码如下: var ul = document.getElementById('demo'); var liList = ul.getElementsByTagName('li'); for (var i = 0; i <

  • JavaScript的removeChild()函数用法详解

    removechild 函数可以删除父元素的指定子元素. 如果此函数删除子节点成功,则返回被删除的节点,否则返回null. 语法结构: fatherObj.removeChild(childrenObj) 参数解释: 1.fatherObj:要删除子元素的元素对象. 2.childrenObj:要被删除的子元素对象. 特别说明: 在火狐.谷歌和IE8以上浏览器中,空白也算是一个文本节点,但是在IE8和IE8以下浏览器中会忽略空白文本节点,具体可以参阅javascript如何获取元素的子节点和父节

  • javascript removeChild 使用注意事项

    假如:一段普通的代码: 其中gift_list为一个table的id 复制代码 代码如下: var giftBody = document.getElementById("gift_list").getElementsByTagName("tbody")[0]; var giftTrs = giftBody.getElementsByTagName("tr"); for (var i=0;i<giftTrs.length;i++) { gi

  • js使用removeChild方法动态删除div元素

    在做用户查找时 因为要把查找的结果动态加载和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态加载和显示.所以考虑到用js来搞. 这个for循环就是移除已有的表单.然后根据Ajax请求过来的数据,动态生成新的表单对象.一定要注意j变量从大往小循环,否则,删除div元素后会引起serchResultLenth=serchResult.children.length;长度的变化(这个问题摸索了好久,才搞定,切记) for(va

  • javascript removeChild 导致的内存泄漏

    为得求证,自己写了一个页面来验证怎样内存泄漏.代码如下 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • javascript删除元素节点removeChild()用法实例

    本文实例讲述了javascript删除元素节点removeChild()用法.分享给大家供大家参考.具体分析如下: 操作DOM节点的方法:removeChild(),移除子节点,那么可以变通一下来实现移除指定的节点,我们可以先去找到要删除节点的父节点,然后在父节点中运用removeChild来移除我们想移除的节点. function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentEleme

  • JavaScript中removeChild 方法开发示例代码

    1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove

  • javascript中字符串的定义示例代码

    复制代码 代码如下: <html> <head> <title>javascript中字符串的定义</title> <script> //定义字符串 //第一种 var str = new Array(); alert(str);//空字符 //第二种 var str2 = new Array("hello"); alert(str2);//hello //第三种 /* String 对象可用字符串文字显式创建. 用这种方法创

  • JavaScript中实现Map的示例代码

    不废话了,直接贴代码了. 代码一: var map=new Map(); map.put("a","A");map.put("b","B");map.put("c","C"); map.get("a"); //返回:A map.entrySet() // 返回Entity[{key,value},{key,value}] map.containsKey('kevin'

  • Javascript中string转date示例代码

    把一个日期字符串如"2007-2-28 10:18:30"转换为Date对象: 1: 复制代码 代码如下: var strArray=str.split(" "); var strDate=strArray[0].split("-"); var strTime=strArray[1].split(":"); var a=new Date(strDate[0],(strDate[1]-parseInt(1)),strDate[2

  • asp.net后台cs中的JSON格式变量在前台Js中调用方法(前后台示例代码)

    复制代码 代码如下: //后台cs代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Login_jg : System.Web.UI.Page { protected void Page_Load(object sende

  • JavaScript 中Date对象的格式化代码方法汇总

    JavaScript默认的时间格式我们一般情况下不会用,所以需要进行格式化,下面说说我总结的JavaScript时间格式化方法. 很多时候,我们可以利用JavaScript中Date对象的内置方法来格式化,如: var d = new Date(); console.log(d); // 输出:Mon Nov 04 2013 21:50:33 GMT+0800 (中国标准时间) console.log(d.toDateString()); // 日期字符串,输出:Mon Nov 04 2013

  • 原生JavaScript实现模态框的示例代码

    原生JavaScript实现模态框的示例代码

    目录 原生js封装模态框 示例效果 代码 原生js封装模态框 最近需要一个模态框,然后一种是提示类的,一种是确认类型,我就想着再网上找一个然后修改一下,结果找到了,但是不深特别合适,我再次基础上在做了修改,对功能有所增强,纯原生写的,没有任何依赖性,适应性比较强,值copy即可使用. 配置:可以在实例化时对options进行参数设置,达到自己想要的效果 示例效果 代码 HTML部分 <head> <meta charset="utf-8"> <title&

  • 如何在vue中使用ts的示例代码

    如何在vue中使用ts的示例代码

    本文介绍了如何在vue中使用ts的示例代码,分享给大家,具体如下: 注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可

  • 原生JavaScript实现弹幕组件的示例代码

    前言 如今几乎所有的视频网站都有弹幕功能,那么今天我们就自己用原生 JavaScript 封装一个弹幕类.这个类希望有如下属性和实例方法: 属性 el容器节点的选择器,容器节点应为绝对定位,设置好宽高 height 每条弹幕的高度 mode 弹幕模式,half则为一半容器高度,top为三分之一,full为占满 speed弹幕划过屏幕的时间 gapWidth后一条弹幕与前一条弹幕的距离 方法 pushData 添加弹幕元数据 addData持续加入弹幕 start开始调度弹幕 stop停止弹幕 r

  • Vue-cli3中使用TS语法示例代码

    目录 ts有什么用? 为什么用ts? 1.引入Typescript包 2.配置 3.让项目识别.ts 4.vue组件的编写 ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的“痛点”:弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马就能知道这

随机推荐