JQuery로 동적으로 추가 된 html 요소 제거

Question

내 HTML 페이지에서 일부 옵션으로 선택 항목이 있습니다.
옵션을 선택하면 옵션 값을 PHP 스크립트로 전달하여 ajax 호출이 시작되고 페이지에 추가 된 특정 ID가있는 html 조각 (다른 선택 사항)을 반환합니다.

사용자가 첫 번째 선택에서 다른 옵션을 선택하면 이벤트가 다시 발생하고 ajax 호출이 실행되며 동일한 id를 가진 다른 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?를 참조하십시오.

$("#id_subserie_label") 객체이며, 항상 true로 평가 객체 : Ivo가 지적한대로, 때문에

---

이

입니다. 당신이 console.log() 전화가 필요하지 않은 경우

---

는 Andy E's 코멘트 당, 당신이 당신의 코드를 단순화 할 수 있습니다

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