Question

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

当用户从第一个选择中选择另一个选项时，再次触发该事件，执行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元素是在第一次调用返回的元素之后追加的（因为加载脚本时，id为#id_subserie_label的元素不在页面中？）。 / p>

我如何实现我的需要？

Answer 1

你非常接近。

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

$(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);
        });
    });
});

请参阅The jQuery FAQ: How do I test whether an element exists?。

这是因为Ivo指出：

$("#id_subserie_label")是一个对象，对象总是评估为true。

根据Andy E's评论，如果您不需要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);
        });
    });
});

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

1 个答案: