无法删除 AJAX 加载的元素答案

【问题标题】：Unable to remove element loaded by AJAX无法删除 AJAX 加载的元素
【发布时间】：2012-02-17 21:08:36
【问题描述】：

我正在尝试删除 AJAX 成功的元素，该元素在之前的 AJAX 调用期间加载并附加到文档。

我的代码如下所示：

$("#jobs-table-body").on("click", ".one-rc-button", function() {
    var ctx = $.parseJSON($(this).siblings(".context").html());

    $("#one-rc-candidate-id").val(ctx.candidateId);
    $("#one-rc-job-id").val(ctx.jobId);

    var loader = $("#wrapper").loader();

    $.post($("#one-rc-form").attr("action"), $("#one-rc-form").serialize(), function(result) {
        loader.remove();
        if(result.success) {

            // This works and returns 1
            alert($("#candidate-row-" + result.rejectedCandidateId).length);

            // This doesn't seem to be doing anything
            $("#candidate-row-" + result.rejectedCandidateId).remove();
        } else {
            //$("#one-jc-messages").html(result.error);
        }
    });
});

元素 .one-rc-button 和 #candidate-row-<candidateId> 由先前的 AJAX 调用加载，它们附加到文档中，因为我可以在我的页面上很好地看到它们。

现在，在单击先前生成的.one-rc-button 时，我会触发第二次 AJAX 调用（工作正常），在 result.success 上，我想删除 #candidate-row-<candidateId>（在先前生成的父元素中） .

警报有效并返回1。所以我确定选择器很好，它匹配一个独特的元素。

我不明白为什么它无法从页面中删除元素。

观察

我使用 Firefox 10.0.2，此问题可重现。
在 IE 8 上，它可以工作（元素被删除）
在 Firebug 上调试脚本时，我可以验证我是否获得了正确元素的句柄。

【问题讨论】：

再次检查长度。我敢肯定在remove之后它会是0。
@gdoron 我刚试过。它保持1。
那是什么元素？？？
这是一个<div/>，里面有更多的标记。
另一个更新是我能够成功地做.hide()。只是 .remove() 不起作用。

标签： ajax jquery

【解决方案1】：

尝试使用 FireBug 在该行上设置一个断点，以便您可以准确地看到它从该选择器中得到了什么。理想情况下，首先分解语句，如下所示：

var unwantedDiv = $("#candidate-row-" + result.rejectedCandidateId);
unwantedDiv.remove(); // <-- Set a breakpoint on this line

然后，您可以在 firebug 调试器右侧的监视窗格中查看不需要的Div 变量，看看它是什么，它有/没有什么方法等。我假设你没有得到你想要的东西认为你是，可能是因为你在上一次 AJAX 调用之后附加了 div。有关使用 FireBug 进行 JavaScript 调试的更多信息here。

另一种选择是在 firebug 控制台中打开严格的警告，看看您是否收到任何“未定义方法”错误，这不会停止 FireFox 上的显示，而只是让您退出该功能。你在 IE 中遇到错误吗？

【讨论】：

刚设置断点调查。事实证明，我得到了正确的元素。好吧，我刚刚在 IE 8 上进行了测试，它成功地删除了那里。我正在使用 FF 10.0.1
奇怪。开启严格警告后，您是否收到任何警告？
啊！沉默的失败——我们一定在前世犯了罪。如果你尝试不想要的Div.empty().remove(); 会发生什么？ ?

【解决方案2】：

通过一个非常丑陋的解决方法解决了它。我仍然不确定是什么导致了这种行为。

if(result.success) {
    var removeThis = $("#candidate-row-" + result.rejectedCandidateId);
    removeThis.remove();
    removeThis = $("#candidate-row-" + result.rejectedCandidateId);
    if(removeThis.length != 0) {
        removeThis.remove();
    }
}

现在它可以在 Firefox 和 IE 上运行。

【讨论】：