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

下面给大家介绍Javascript removeChild()删除节点的方法,具体详情如下所示:

在Javascript中,只提供了一种删除节点的方法:removeChild()。

removeChild() 方法用来删除父节点的一个子节点。

语法:

    parent.removeChild(thisNode)

参数说明:

 

参数 说明
thisNode 当前节点,即要删除的节点
parent 当前节点的父节点,即 thisNode.parentNode

例如,删除 id="demo" 的节点的语句为:

var thisNode=document.getElementById("demo");
thisNode.parentNode.removeNode(thisNode);

举例,删除节点:

<div id="demo">
  <div id="thisNode">点击删除我</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
  this.parentNode.removeChild(this);
}
</script>

实例演示:

 

可以看出来,虽然Javascript只提供了一种删除节点的方法,但是足够用了。

ps:JavaScript删除子节点的方法

HTML代码如下:

<div id="f">
 <div>a</div>
 <div>b</div>
 <div>c</div>
</div> 

如果想删除f节点下的所有子节点,很自然也很正常想到的方法应该就是下面的这段代码了:

var f = document.getElementById("f");
var childs = f.childNodes;
for(var i = 0; i < childs.length; i++) {
  alert(childs[i].nodeName);
  f.removeChild(childs[i]);
} 

当程序运行后我们发现无论在FireFox还是在IE下,均不能完全的删除所有的子节点(FireFox中把空白区域也
当成节点,所以删除结点的结果会不一样的),这是因为当你把索引为0的子节点删除后那么很自然的原来索引
为1节点此时它的索引变成0了,而这时变量i已经变成1了,程序继续走时就会删除原先索引为2的现在为1的节点,这样程序运行的结果就是只删除了一半的子节点,用for in遍历结果也是一样的。想正常的删除全部节点
的话,我们应该从后面往前删除,代码如下:

for(var i = childs.length - 1; i >= 0; i--) {
  alert(childs[i].nodeName);
  f.removeChild(childs[i]);
} 

我们从索引最大值开始删除,采用递减的方法,这样索引便不会移动改变了。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索removechild
, js_removechild
javascript删除节点
removechild、js removechild、jquery removechild、jq removechild、document.removechild,以便于您获取更多的相关知识。

时间: 2024-09-20 05:41:34

Javascript removeChild()删除节点及删除子节点的方法_javascript技巧的相关文章

JavaScript 节点操作 以及DOMDocument属性和方法_javascript技巧

属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6documentElement 返回文档的根元素(可读写) 7firstChild 返回当前节点的第一个子节点(只读) 8Implementation 返回XMLDOMImplementation对象 9lastChild 返回

JavaScript利用HTML DOM进行文档操作的方法_javascript技巧

HTML DOM 树 一.DOM简介 DOM是W3C制定的用于访问诸如XML和XHTML等结构化文档的标准. W3C文档对象模型(DOM)是一个使程序和脚本有能力动态地访问和更新文档的内容.结构以及样式的平台和语言中立的接口 核心DOM:用于任何结构化文档的标准模型 XML DOM:用于XML文档的标准模型.是用于获取.更改.添加或删除XML元素的标准. HTML DOM: 用于HTML文档的标准模型.定义了所有HTML元素的对象和属性,以及访问它们的方法(接口). 二.DOM节点 根据DOM规

javascript的document中的动态添加标签实现方法_javascript技巧

document的高级篇中提供了节点操作的函数,具体包括:获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数.我们可以利用这些函数动态改变html的节点. 1.JavaScript <script type="text/javascript"> function test1(){//对个节点的ID相同时候的情况 var myhref = document.getElementById('same'); window.alert(myhref.inne

javascript解析xml实现省市县三级联动的方法_javascript技巧

本文实例讲述了javascript解析xml实现省市县三级联动的方法.分享给大家供大家参考.具体实现方法如下: (该方法适用于任何常用浏览器) <body> <div> <span> <select id="sheng" style="width: 100px"></select> </span> <span> <select id="shi" style=

Javascript解决常见浏览器兼容问题的12种方法_javascript技巧

如果你不知道原因,不要过于担心,请研究CSS规则并查看这篇文章:使用CSS来修正一切: 20 +常见错误和修复. 如果这些也无效,您可以通过下面列出的12个javascript解决方案修复它,这样您的网页看起来就能跨越所有浏览器了! 在本文中,我们会揭开你在开发web应用是可能会遇到的12个最常见的CSS问题的javascript解决方案. 1. 自动匹配高度 自从我们抛弃了基于Table的页面布局后,创建同等高度栏目或内容盒子的视觉效果已然是一个挑战. 1.1 用jQuery设置匹配高度 这个

javascript模拟map输出与去除重复项的方法_javascript技巧

本文实例讲述了javascript模拟map输出与去除重复项的方法.分享给大家供大家参考.具体方法如下: 1.Javascriptmap输出 function Map(){ // private var obj = {} ;// 空的对象容器,承装键值对 // put 方法 this.put = function(key , value){ obj[key] = value ;// 把键值对绑定到obj对象上 } // size 方法 获得map容器的个数 this.size = functio

JavaScript实现点击单元格改变背景色的方法_javascript技巧

本文实例讲述了JavaScript实现点击单元格改变背景色的方法.分享给大家供大家参考,具体如下: <html> <body> <table onclick="SetColor(event)" id="_t" width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <t

Javascript iframe交互并兼容各种浏览器的解决方法_javascript技巧

在Web前端开发中,我们经常会用到iframe这个控件. 但是这个控在内.外交互时,往往各个浏览器所用的关键字不同,很是麻烦,为了能够得到子iframe中的window对象,各家浏览器有着各家的指定,有的是window,有的是contentWindow等等也许还有我们不知道的. 但是从子页面访问父层页面,其本上大家都是window.parent就可以了. 那么通过这个特征,我们可以在子页面中,把自身的window对象传递给父页面就可以了,这样父页面就很轻松的访问子页面,再也不用靠虑如何从ifra

js父页面中使用子页面的方法_javascript技巧

iframe是非常常用的一个html元素,如果在父页面中使用子页面的方法应该怎么写呢,下面就做一下简单的介绍.一.父页面代码 <html> <head> <meta charset=" gb2312"> <title>父页面</title> <script type="text/javascript"> function parentFunction() { alert('function in

JavaScript记录光标在编辑器中位置的实现方法_javascript技巧

本文实例讲述了JavaScript记录光标在编辑器中位置的实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head