当函数中存在多个时，javascript/ DOM 中的removeChild 无法正常工作

Question

更新： 这是 JsFiddle 链接： http://jsfiddle.net/zAVFv/

它似乎在 JsFiddle 中不起作用，但我猜它可以显示整个代码 - html、css 和 Js。

我在使用 Javascript 编辑 DOM 时遇到了一个非常奇怪的情况。我的示例代码如下。基本上，swapCells 将接受两个对象，每个对象有 2 个子对象 - 一个是 img 元素，另一个是 textNode。我想看看removeChild 是如何工作的。

我标记了所有混乱的来源的两行。 问题＃1 是在 sourceTD 删除其子项的行上，问题＃2 是当最后一个子项从目标 TD 中删除时。

让我解释一下下面的代码是如何运行的： a) 当代码中仅存在问题第 1 行时，sourceTD 子项将被删除，输出显示 source 有 1 个 img 类型的子项；目的地有 2 个子项 - img 和 text ---- 按预期工作 b) 当代码中仅存在问题行 #2 时，destinationTD 子项将被删除，再次与上面类似，如预期的那样 c) 现在的问题 - 当代码中存在这两行时，它仅删除 sourceTD lastChild。仅接收警报的 sourceTD 部分的输出。 destinationTD 警报不会出现，因此我无法评估目标子项是否已被删除

代码：

function swapCells(sourceTD, destinationTD){

//line below is issue line#1 
sourceTD.removeChild(sourceTD.lastChild);  

//line below is issue line#2
destinationTD.removeChild(destinationTD.lastChild);

    if(sourceTD.hasChildNodes()){
        alert("Source has: " + sourceTD.childNodes.length);
        alert(sourceTD.childNodes[0].alt); 
        alert(sourceTD.childNodes[1].nodeName); 
    }
destinationTD.removeChild(destinationTD.lastChild);
    if(destinationTD.hasChildNodes()){
        alert("Destination has: " + destinationTD.childNodes.length);
        alert(destinationTD.childNodes[0].alt); 
        alert(destinationTD.childNodes[1].nodeName); 
    }
}

请让我知道为什么当两个问题行都存在时代码行为异常。另外，是否有类似函数只能删除单个节点，或者只有一个removeChild 才能工作......？？？我很困惑。

谢谢！

Answer 1

已排序 -> http://jsfiddle.net/zAVFv/3/

TD 的第一个 childNode 是换行符，而不是img 元素....将数字增加 1 并且工作正常...在产品环境中使用似乎有点脆弱 - 除非你可以控制 HTML - 也许看看使用getelementbytagname('img') 而是？

Answer 2

当两行都在那里时，您最终会调用 destinationTD.removeChild(destinationTD.lastChild); 两次，因此两个子项都会被删除。然后，您的 if 语句的计算结果为 false，因为 destinationTD 没有子节点，因此您不会得到任何输出 - 在这种情况下，缺少输出证明代码正在运行，而不是证明它有效不是。

Answer 3

啊啊……明白了。

该问题是由于删除后引用不再存在的子节点而产生的错误。

例如，如果 sourceTD 有 3 个子节点，并被引用为 childNodes[1] 和 childNodes[2]，则删除 sourceTD 的最后一个子节点后，不再有 childNodes[2]，因为只剩下 2 个子节点并且不再有第三个节点。由于 JS 中出现此错误，其余代码会以某种方式被抑制并且无法运行。这就是为什么destinationTD 警报也被抑制的原因。

愚蠢的参考..！

感谢大家，特别是@ManseUK 的所有帮助