`
sdustyongz
  • 浏览: 85623 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript删除子节点的方法

    博客分类:
  • js
 
阅读更多
HTML代码如下:
view plain
<div id="f"> 
  <div>a</div> 
  <div>b</div> 
  <div>c</div> 
</div> 

如果想删除f节点下的所有子节点,很自然也很正常想到的方法应该就是下面的这段代码了:
view plain
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遍历结果也是一样的。想正常的删除全部节点
的话,我们应该从后面往前删除,代码如下:
view plain
for(var i = childs.length - 1; i >= 0; i--) { 
    alert(childs[i].nodeName); 
    f.removeChild(childs[i]); 


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

相关推荐

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

    removeChild() 方法用来删除父节点的一个子节点。 语法:  parent.removeChild(thisNode) 参数说明:   参数 说明 thisNode 当前节点,即要删除的节点 parent 当前节点的父节点,即 thisNode[removed] ...

    删除javascript所创建子节点的方法

    本文实例讲述了删除javascript所创建子节点的方法。分享给大家供大家参考。具体如下: js创建的节点,一时不知道如何删除。。。耗了一大堆时间 for(var i = 0; i &lt; jsonList.length; i++ ){ var li_button = ...

    Javascript删除指定元素节点的方法

    在一些js框架,如Prototype中,可以用element.remove()来删除一个节点,核心JS中并 没有这样的方法,IE中有这样一个方法:removeNode(),尝试运行下面的代码 &lt;div&gt;&lt;input onclick="removeNode(this)" type="text...

    JavaScript实现动态添加、移除元素或属性的方法分析

    删除元素的某个指定的子节点,并以 Node 对象返回被删除的节点,如果节点不存在则返回 null。 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。 测试用例 &lt;html&gt; &lt;head&gt;

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

    操作DOM节点的方法:removeChild(),移除子节点,那么可以变通一下来实现移除指定的节点,我们可以先去找到要删除节点的父节点,然后在父节点中运用removeChild来移除我们想移除的节点。 function removeElement(_...

    html5中JavaScript removeChild 删除所有节点

    通过JavaScript可以删除所有节点,本文里主要讨论 removeChild 函数,大家可以看看下面的示例

    javascript删除一个html元素节点的方法

    主要介绍了javascript删除一个html元素节点的方法,可通过获取父节点再查找并删除子节点来实现该功能,具有一定的参考借鉴价值,需要的朋友可以参考下

    JavaScript的removeChild()函数用法详解

    如果此函数删除子节点成功,则返回被删除的节点,否则返回null。 语法结构: fatherObj.removeChild(childrenObj) 参数解释: 1.fatherObj:要删除子元素的元素对象。 2.childrenObj:要被删除的子元素对象。 特别说明: ...

    JavaScript数据结构之二叉树的删除算法示例

    如果删除没有子节点的节点就非常简单,如果节点只有一个子节点,不管是左子节点还是右子节点,就变得稍微有点复杂,如果节点包含两个子节点就最复杂。 如果待删除节点是叶子节点,那么只需要将从父节点指向它的链接...

    JavaScript详解(第2版)

     15.3.1 父节点和子节点   15.3.2 兄弟节点   15.3.3 nodeName和nodeType属性   15.3.4 空白bug   15.4 遍历DOM   15.5 DOM查看器   15.6 查询DOM的快捷方式   15.6.1 document.getElement-...

    JavaScript实现获得所有兄弟节点的方法

    这段代码先获得元素父节点,然后获得其父节点的所有子节点,然后删除自己便是所有兄弟节点 function sibling(elem){ var r=[]; var childs=elem[removed].childNodes; for(var i=0,len=childs.length;i&lt;len;i...

    JavaScript完全自学宝典 源代码

    5.3.html 获取元素的子节点。 5.4.html 改变div的内容。 5.5.html 获取表格第1行。 5.6.html 获取表格的某列。 5.7.html 修改表格的内容。 5.8.html 无刷新效果更改表格的某行。 第6章(\...

    Echarts 实现树状图的展示与编辑示例

    增加子节点,删除子节点,删除当前节点,编辑节点 非常详细的操作,包含右键菜单的实现功能。 如果需要更详细的使用支持,可以私信咨询小编或者评论区留言,小编会在第一时间及时回复。 感觉对您有所帮助的话,还请...

    Javascript 文档管理器

    2. 删除节点: 勾上需要删除的节点,点击删除, 只会删除子节点, 不会删除父节点. 3. 改名字: 单击需要改名字的节点, 填写新名字, 点击"改名字". 4. 移动节点: 单击需要移动的节点, 低级"移动到...", 会弹出一个新窗口....

    javascript TreeView导航菜单MyTree

    具体包括:展开所有节点、收缩所有节点、节点选择、动态添加子节点到当前选择节点、动态添加子节点到指定id节点、添加含(不含)图标节点、动态删除当前选择节点、动态删除指定Id节点。 兼容IE6、IE7、FF3.x

    JavaScript之DOM_动力节点Java学院整理

    由于HTML文档被浏览器解析后就是一棵... 删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点。 在操作一个DOM节点前,我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.

    JavaScript评论点赞功能的实现方法

    2.掌握Dom操作中的添加/删除子节点方法。 3.使用setTimeout设置定时器。 4.使用clearTimeout清除定时器以及事件代理的运用。 效果图: 1)实现删除分享内容功能 利用事件代理实现点击关闭按钮删除分享内容。 删除...

    JavaScript王者归来part.1 总数2

     12.4.3 回收空间--删除不用的节点   12.5 访问和操纵DOM节点   12.5.1 打开每一个盒子--遍历节点   12.5.2 弄清层级关系--父子与兄弟   12.5.3 如何搜索特定节点   12.5.4 克隆节点--一个使用cloneNode...

Global site tag (gtag.js) - Google Analytics