Question

我想首先说我不是JQuery的专家，而且我知道我在这里做错了。

问题是，当我从一个元素中删除一个子元素时，它只会清空子元素并将其挂在父节点中：

代码：

function DeleteAttributeFromNr(id) {
    $("#tbodyAttributes").children("#row-" + id).remove();

    CheckAttributes();
}

function CheckAttributes() {
    if ($("#tbodyAttributes tr").length <= 1) {
        $("#tbAttributes tbody").append('<tr><td colspan="3" id="tdEmptyBody">You have no attributes assigned to this number yet.</td></tr>');
    } else if ($("#tdEmptyBody").length == 1) {
        $("#tdEmptyBody").remove();
    }
}

从"#tbodyAttributes tr"

中删除几次后的结果

<tbody id="tbodyAttributes">
    <tr></tr>
    <tr></tr>
</tbody>

对于CheckAttributes中的逻辑代码，这是一个公平的搞砸，你可能会注意到。还有其他方法可以删除<tr>作为一个整体吗？

我试过了：

$("#tbodyAttributes").removeChild("#row-" + id); //Very surprised this did not exist
$("#tbodyAttributes").children("#row-" + id).remove();
$("#tbodyAttributes").find("#row-" + id).remove();
$("#row-" + id).remove();
$("#row-" + id).empty(); //desperation run, I knew this one would not work since I use it a lot to clear out tables

我知道它显而易见的事情。我确实侦察了 whackystacky ，但没有得到任何答案（我可以找到）

Answer 1

试试这个：

function CheckAttributes() {
    if ($("#tbodyAttributes tr").length <= 1) {
        $("#tbAttributes tbody").append('<tr><td colspan="3" id="tdEmptyBody">You have no attributes assigned to this number yet.</td></tr>');
    } else if ($("#tdEmptyBody").length == 1) {

        // $("#tdEmptyBody").remove();  This just remove the td only
        $("#tdEmptyBody").closest('tr').remove();
    }
}

并删除空tr

$("#tbodyAttributes > tr:empty").remove();

Answer 2

找到它。我的大脑褪色了。

我正忙着删除<td colspan="3" id="tdEmptyBody">You have no attributes assigned to this number yet.</td>，这不是<tr>，而是tr标记的子项。这意味着空tr标签将保留，除非我删除tr：empty以及tdEmptyBody

解决方案：

 $("#tbAttributes tbody").append('<tr id="trEmptyBody"><td colspan="3" >You have no attributes assigned to this number yet.</td></tr>');

我必须在这里将tr元素重命名为trEmptyBody，并更新我的代码引用。

        if ($("#tbodyAttributes tr").length <= 1) {
            $("#tbAttributes tbody").append('<tr id="trEmptyBody"><td colspan="3" >You have no attributes assigned to this number yet.</td></tr>');
        } else if ($("#trEmptyBody").length == 1) {
            $("#tbAttributes #trEmptyBody").remove();
        }

我的代码现在有效。为浪费每个人的时间道歉

在jquery中删除了不正确的子对象

2 个答案: