似乎没有在JsFiddle中工作，但猜测它可以显示整个代码 - html，css和Js。

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

我已经标记了所有混乱来自的两条线。问题＃1在sourceTD删除其子项的行上，问题＃2是从destinationTD删除lastChild的时间。

让我解释下面的代码是如何运行的： a）当代码中只出现第1行问题时，sourceTD子项被删除，输出结果显示source有1个img类型的子项;目的地有2个孩子 - img和text ----按预期工作 b）当代码中仅存在第2行问题时，destinationTD子项被删除，再次类似于上面的工作，AS EXPECTED c）现在的问题 - 当代码中存在两行时，它只删除sourceTD lastChild。仅收到sourceTD部分警报的输出。 目标广告提醒未来，因此我无法评估目标儿童是否已被删除

CODE：

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

已排序 - ＆gt; http://jsfiddle.net/zAVFv/3/

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

Answer 2

当你有两条线路时，你最终会拨打destinationTD.removeChild(destinationTD.lastChild);两次，这样两个孩子都会被移除。你的if语句然后评估为false，因为destinationTD没有子节点，所以你没有得到任何输出 - 在这种情况下，缺少输出证明代码是工作的，而不是证明它不是

Answer 3

啊，啊......明白了。

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

例如，如果sourceTD有3个子节点，并被引用为childNodes [1]和childNodes [2]，则在删除sourceTD的lastChild时，不再有childNodes [2]，因为有只剩2个，没有第三个节点。由于JS中的这个错误，剩下的代码以某种方式被抑制而不是运行。所以这就是为什么destinationTD警报也被抑制的原因。

愚蠢的参考..！

感谢大家，尤其是@ManseUK的所有帮助

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

似乎没有在JsFiddle中工作，但猜测它可以显示整个代码 - html，css和Js。

3 个答案: