Удалять HTML-элементы, добавленные динамически с JQuery - PullRequest
Новая
       4

Удалять HTML-элементы, добавленные динамически с JQuery

2 голосов
/ 17 января 2011

На моей html-странице у меня есть выбор с некоторыми опциями.
При выборе параметра вызывается ajax-вызов, передавая значение параметра в скрипт php, который возвращает фрагмент html (другой выбор) с определенным идентификатором, который добавляется на страницу.

Когда пользователь выбирает другую опцию из первого выбора, событие запускается снова, выполняется ajax-вызов, и другой html-фрагмент (с тем же идентификатором) добавляется на страницу.

Я хочу, чтобы, если событие было запущено во второй раз, добавленный элемент удалялся со страницы перед добавлением нового.

В данный момент я использую этот код: 

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

Это не работает, хотя элемент html, возвращаемый вторым вызовом ajax, добавляется после элемента, возвращенного из первого вызова (поскольку элемент с идентификатором #id_subserie_label отсутствует на странице при загрузке сценария?).

Как мне достичь того, что мне нужно?

1 Ответ

2 голосов
/ 17 января 2011

Ты очень близко.

Просто измените 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);
        });
    });
});

См. FAQ по 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);
        });
    });
});
...