`
sdustyongz
  • 浏览: 89658 次
  • 性别: 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]); 


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

相关推荐

    jquery节点删除子节点方法应用

    如果只想删除子节点而不删除父元素,可以通过选择器参数来实现。但在本例中,`empty()`方法更为合适,因为它只清除子节点,保留了父元素`checkList`。 ```javascript $("#checkList *").remove(); ``` 上述代码会...

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

    ### 删除子节点的实践示例 考虑一个简单的HTML结构: ```html 点击删除我 ``` 你可以使用事件监听器来实现点击删除子节点的功能: ```javascript document.getElementById("thisNode").onclick = function() ...

    删除XML根节点下的某子节点

    // 查找并删除子节点 let child2Node = xmlDoc.getElementsByTagName("child2")[0]; xmlDoc.documentElement.removeChild(child2Node); // 序列化为XML字符串 let serializer = new XMLSerializer(); let ...

    javascript节点属性和方法

    17. removeChild:从子结点列表中删除指定的子节点 18. replaceChild:从子节点列表中替换指定的子节点 19. Save:把 XML 文件存到指定节点 20. selectNodes:对节点进行指定的匹配,并返回匹配节点列表 21. ...

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

    本文将详细讲解如何删除由JavaScript创建的子节点,以及介绍几种常用的DOM操作方法。 首先,让我们回顾一下如何使用JavaScript来创建新的DOM元素。在提供的代码片段中,可以看到一个例子: ```javascript for (var...

    javascript 节点

    - **修改节点**:可以通过修改节点的属性或子节点来改变节点的状态。 - **删除节点**:可以通过`removeChild()`方法从父节点中删除一个子节点。 ##### 示例代码: ```javascript // 创建一个新元素节点 var new...

    纯js的树形菜单(添加删除节点)

    2. 如果选择的是父节点,还需递归删除其所有子节点。 3. 使用jQuery的`.remove()`方法移除选定节点。 在HTMLPage1.htm中,可能包含了HTML结构以及事件处理函数的定义;而jquery-1.4.1.js是jQuery库的引用,确保了...

    html5中JavaScript removeChild 删除所有节点

    这种方法直接清空了指定元素的HTML内容,从而达到了删除子节点的目的。但本文主要讨论的是如何使用removeChild方法进行操作。 在使用JavaScript操作DOM时,要注意节点的父节点关系,因为只有父节点才能删除其子节点...

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

    在早期的JavaScript中,删除DOM元素节点通常依赖于`removeChild()`方法,该方法存在于每个节点对象上,允许从父节点中移除指定的子节点。使用`removeChild()`方法时,首先需要找到要删除节点的父节点,然后通过调用...

    JQ 删除节点

    `empty()`方法用于清除元素的所有子节点,但不会删除元素本身。这对于清空容器元素而保留容器结构的情况很有用。 在实际开发中,合理地使用`remove()`和`detach()`可以优化代码性能,避免内存泄漏,并确保用户体验...

    百万节点javascript树

    在JavaScript中,树通常通过对象和数组来表示,每个节点是一个对象,包含数据以及指向其子节点的引用。然而,当树的规模达到百万级时,如何高效地操作和渲染这些节点成为关键问题。以下是一些重要的知识点: 1. **...

    asp.net treeview控件动态加载数据,选中父节点和子节点处理

    - 当用户选中或取消选中某个节点时,可以通过JavaScript来触发相应的事件处理器,根据当前选中状态来进行父节点和子节点的选择状态更新。 ```javascript function CheckEvent() { var objNode = event....

    解决XML节点删除后会留下一个空节点的问题

    例如,在JavaScript的DOM API中,应使用`Node.removeChild()`方法,而不是简单地将子节点赋值为`null`。 2. **替换节点**:如果只是想替换节点的内容,可以先创建一个新的空节点,然后用新节点替换旧的,再删除旧...

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

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

    javascript读取XML文件方法

    删除节点时需要注意,只能删除某一个节点下的子节点,而不能直接删除孙节点。例如: ```javascript var myNode = xmlDoc.selectSingleNode("//root/node[@text='Name']"); var rootNode = xmlDoc.selectSingleNode...

    JavaScript节点知识

    此外,DOMDocument对象还提供了多种方法,如`appendChild`用于在子节点末尾添加新节点,`removeChild`用于删除指定子节点,`insertBefore`在特定子节点前插入新节点,`createElement`创建新元素节点等,这些都是操作...

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

    需要注意的是,`removeChild()`方法只能用于删除直接子节点,即只有当`childElement`确实是`parentElement`的子节点时,才能成功执行。 在实际应用中,我们需要首先获取到想要删除的节点的父节点,然后才能调用`...

Global site tag (gtag.js) - Google Analytics