javascript - node.removeChild(child)的怪异行为

我创建了一个非常基本的表和复选框布局。我在一个表中有八个文本框和八行。我只是想在复选框选中添加行，而在取消选中删除。

因此，我将两个函数用于同一对象。

function show(input){
    var tbody = document.getElementById("tbody");
    if(document.contains(document.getElementById("tr"+input)))
    {
         hide('tr'+input);
    }
    if(!document.contains(document.getElementById("tr"+input)))
    {
         tbody.appendChild(getRow(input));
    }
}

function hide(input){
    if(document.contains(document.getElementById(input)))
    {
        var child = document.getElementById(input);
        child.parentNode.removeChild(child);
        child.parentNode.removeChild(child);
    }
}

在hide函数中，如果我仅使用一个removeChild语句，则它将不起作用。使用两个时，控制台中会报告一个错误，但它可以正常工作。

如果有人知道原因，请告诉我，因为在代码中留下错误是不道德的。

编辑＃1：JsFiddle

最佳答案

您的问题是此功能：

function show(input) {
    var tbody = document.getElementById("tbody");
    if (document.contains(document.getElementById("tr" + input))) {
        hide('tr' + input);
    }
    if (!document.contains(document.getElementById("tr" + input))) {
        tbody.appendChild(getRow(input));
    }
}

首先，检查该节点是否存在，如果存在，则将其隐藏。接下来，您始终检查该节点是否不存在，如果存在，则添加它。当节点刚刚被隐藏时，第二个检查将是true（因为您刚刚删除了该节点），然后再次添加了该节点。

因此重写为：

function show(input) {
    var tbody = document.getElementById("tbody");
    if (document.contains(document.getElementById("tr" + input))) {
        hide('tr' + input);
    } else if (!document.contains(document.getElementById("tr" + input))) {
        tbody.appendChild(getRow(input));
    }
}

fiddle

关于javascript - node.removeChild(child)的怪异行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20139602/