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要素が追加されます：私はこのコードを使用しています現時点では

id＃id_subserie_labelは、スクリプトがロードされてもページに表示されません）。

私は必要なものをどのように達成できますか？

Answer 1

あなたは非常に近いです。

ただif ($("#id_subserie_label").length)にif ($("#id_subserie_label"))を変更します。

$(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コメントを1として

---

あなたが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); 
     }); 
    }); 
});