Question

我正在尝试删除在之前的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上调试脚本时，我可以验证我有一个正确的元素句柄。

Answer 1

尝试使用FireBug在该行上设置断点，以便您可以准确地看到它从该选择器获得的内容。理想情况下首先打破语句，如下所示：

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

然后，您可以在firebug调试器右侧的监视窗格中查看unwantedDiv变量，看看它是什么，它有哪些方法/没有等等。我会假设你没有准确地回复你认为你是，可能是因为你在上一次AJAX调用后如何附加div。有关使用FireBug here进行JavaScript调试的更多信息。

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

Answer 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。

无法删除AJAX加载的元素

观察

2 个答案: