Удалить элементы html, добавленные динамически с помощью JQuery

Question

На моей странице 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 элемент, возвращаемый вторым АЯКС вызов добавляется после того, как элемент возвращается из первого вызова (потому что элемент с id #id_subserie_label не находится на странице при загрузке скрипта?).

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

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") является объектом, и объекты всегда оценивать к истине.

---

По 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); 
     }); 
    }); 
});