删除使用 JQuery 动态添加的 html 元素

Question

在我的 html 页面中，我有一个带有一些选项的选择。
选择选项时，会触发 ajax 调用，将该选项的值传递给 php 脚本，该脚本返回带有附加到页面的特定 id 的 html 片段（另一个选择）。

当用户从第一个选择中选择另一个选项时，该事件将再次触发，执行 ajax 调用，并将另一个 html 片段（具有相同的 id）附加到页面。

我希望，如果第二次触发该事件，则在附加新元素之前将从页面中删除附加元素。

目前我正在使用这段代码：

$(document).ready(function() {
    $("#id_serie").change(function() { //#id_serie is the if of the first select
        if ($("#id_subserie_label")) { //#id_subserie_label is the id of the html element returned by the ajax call
            console.log("Removing");
            $("#id_subserie_label").empty().remove();
        }
        var url = 'myscript.php';
        var id_s = $(this).val();
        $.post(url, {id_serie: id_s}, function(data) {
            $("#id_serie").parent().after(data);
        });
    });
}); 

但这不起作用，第二个ajax调用返回的html元素附加在第一次调用返回的元素之后（因为当脚本已加载？）。

我怎样才能实现我所需要的？

Answer 1

您已经非常接近了。

只需将 if ($("#id_subserie_label")) 更改为 if ($("#id_subserie_label").length) code>：

$(document).ready(function() {
    $("#id_serie").change(function() {
        if ($("#id_subserie_label").length) { // <=== change this line
            console.log("Removing");
            $("#id_subserie_label").empty().remove();
        }
        var url = 'myscript.php';
        var id_s = $(this).val();
        $.post(url, {id_serie: id_s}, function(data) {
            $("#id_serie").parent().after(data);
        });
    });
});

请参阅 jQuery 常见问题解答：如何测试元素是否存在？。

---

这是因为，正如 Ivo 指出的那样：

$("#id_subserie_label") 是一个对象，并且对象的计算结果始终为 true。

---

根据 Andy E 的 评论，如果您不需要 ，您可以将代码简化为此console.log() 调用：

$(document).ready(function() {
    $("#id_serie").change(function() {
        $("#id_subserie_label").empty().remove();
        var url = 'myscript.php';
        var id_s = $(this).val();
        $.post(url, {id_serie: id_s}, function(data) {
            $("#id_serie").parent().after(data);
        });
    });
});