js-removeChild()

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

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

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

语法：

parent.removeChild(thisNode)

例如，删除 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了，程序继续走时就会删除原先索引为２的现在为1的节点，这样程序运行的结果就是只删除了一半的子节点，用for in遍历结果也是一样的。想正常的删除全部节点
的话，我们应该从后面往前删除，代码如下：

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

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

js-removeChild()相关推荐

js removeChild 方法
1. 概述删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变 ...
Js removeChild、addChild
1. <html><head><meta http-equiv="Content-Type" content="text/html; cha ...
面试题CSS02【21-10-14】
一.列举CSS中常用的伪类样式伪类 :link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, ...
【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片在DIV间移动的实现-removeChild cloneNode position append 上下对齐带注释/总结
作业要求: 效果: 总结: 1.让元素上下对齐的方法: ①让图片上下对齐用vertical-align:cender; ②让其他元素上下对齐设置line-height与height一样. 2.CSS中 ...
[js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用
本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),clo ...
JS DOM 编程复习笔记 -- replaceChild、cloneNode、removeChild（八）
今天我们继续来去复习DOM操作的三个API,分别为replaceChild.cloneNode.removeChild,替换节点.克隆节点.删除节点,下面一个个来看它们的语法以及使用案例. repla ...
【注意】js 里面 removeChild 使用的坑
这有坑啊,使用removeChild 循环删除子元素们的时候是[0]而不是[i] 这是因为你每次删完一个子元素们的下标就会发生改变比如 allSpan[0] allSpan[1] remo ...
[js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用...
本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),clo ...
js setAttribute removeChild appendChild
1.setAttribute 1.1 创建新的属性,修改属性 33 removeChild 删除父节点中的子节点父节点子节点 appendChild 增加父节点中的子节点父节点
js 添加内容实现列表功能
js 添加使用的是appendChild(node) - 插入新的子节点(元素) 来实现当然也可以删除使用appendChild(node) - 插入新的子节点(元素) 效果图代码如下 < ...

js-removeChild()

js-removeChild()相关推荐

最新文章

热门文章