可能的Chrome 45错误:removeChild方法导致父元素中的其他节点消失

Question

我遇到了Chrome 45版的问题.

问题: 当我尝试使用JavaScript删除最后一个子div时,Chrome引擎会隐藏父div中的所有其他标记(span和b标记将被隐藏):

<div class='parentDiv' id='pdiv'>
    Some text <span style='color:red;'>BBBBBBBBBBBBBBBBBBBBBBB</span> more example text more example <b style="color:green;">more</b> example text more example more example text more example more example text more example more example text example text example text example text example text example text example text example text example text example text
    <div id='secondChild' style='color:blue;'>
        This div should be removed.
    </div>
</div>
<span class='Execute' onclick="removChild()"><b>Click me</b></span>
<script type='text/javascript'>
    var removChild = function() {
        document.getElementById('pdiv').removeChild(document.getElementById('secondChild'))
    }
</script>

看起来只有当前的Chrome版本(45)受到影响.Beta和dev频道不受影响.为了测试,我使用了干净的Chrome版本(没有扩展名).此外,我没有在Chromium问题报告列表中找到此问题.

注意:只有当父div内容大于250个字符时才会发生这样的傻瓜.

问题:我的html结构有问题还是Chrome问题？

小提琴演示

示例:
示例链接1:父div的内容 - 448个符号
示例链接2:父div的内容 - 197个符号

Answer 1

我的 Chrome 版本是 46.0.2490.71，你的代码对我来说工作得很好。对我来说，这确实像是一个 chrome bug。您可以使用lastElementChild删除 secondaryChild，但它必须是要删除的 ParentDiv 中的最后一个子级。

你可以用这个脚本替换你的脚本：

var removChild = function() {
    var lastChild = document.getElementById('pdiv');
    lastChild.removeChild(lastChild.lastElementChild);
}

以下是针对您的 Chrome 版本测试此代码的链接： http: //mashpoe.comeze.com/test.html