jqueryで.append（）を使って作成したdivを削除するには？私はdiv要素は、（.appendを使用して作成した削除したい

Question

）

例：キッチン： HTML

  <input id="type_ingd" type="text"> 
      <button class="btn btn-primary" id="add_ingd"> 
       Add 
      </button> 

      <div class="text-left ingd-cont"> 
       <div class="btn-group incl-ingd"> 
        <div type="button" class="btn btn-default"> 
         Rooms <i class="fa fa-close"></i> 
        </div> 
       </div> 
       <div class="btn-group incl-ingd"> 
        <div type="button" class="btn btn-default"> 
         Mansions <i class="fa fa-close"></i> 
        </div> 
       </div> 
      </div> 

JS

  $("#add_ingd").on('click', function(e) { 
       var ti = $('#type_ingd').val(); 
       $(".ingd-cont").append('<div class="btn-group incl-ingd"><button type="button" class="btn btn-default">'+ti+' <i class="fa fa-close"></i></button></div>'); 
      }); 

      $("i.fa-close").on('click', function(e) { 
       removeIngd(this); 
      }); 
      function removeIngd(thiscont) { 
       $(thiscont).closest('div.incl-ingd').remove(); 
       var iiv = $(".incl-ingd:visible").length; 
       if (iiv == 0){ 
        $("#find-recp-btn").attr('style', 'display:none;'); 
       } 
      } 

まず、私が入力する単語（例を試してみてください）をクリックし、Addボタンをクリックします。

単語がingd-contの内側に追加されます。

そして、私はそれを削除しない単語のfa-closeをクリックしたときに問題が..です

私はこれが可能であるかどうかわからないんだけど、それがある場合は、私を助けてください:)

Answer 1

問題は、セレクタ$("i.fa-close").on('click', function(e) {...});が動的に追加された要素のイベントを捕捉しないことにあります。

セレクタも動的に追加要素をキャッチするために、この内に変更することができる：ここ

$(".ingd-cont").on('click', 'i.fa-close', function(e) { 
 
    removeIngd(this); 
 
});

は実施例です。私はそれが正常に動作し作るために少しコードを調整;）

$("#add_ingd").on('click', function(e) { 
 
    var ti = $('#type_ingd').val(); 
 
    $(".ingd-cont").append('<div class="btn-group incl-ingd"><div type="button" class="btn btn-default">'+ti+' <i class="fa fa-close">X</i></div></div>'); 
 
}); 
 

 
$(".ingd-cont").on('click', 'i.fa-close', function(e) { 
 
    removeIngd(this); 
 
}); 
 
function removeIngd(thiscont) { 
 
    $(thiscont).closest('div.incl-ingd').remove(); 
 
    var iiv = $(".incl-ingd:visible").length; 
 
    if (iiv == 0){ 
 
    $("#find-recp-btn").attr('style', 'display:none;'); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input id="type_ingd" type="text"> 
 
<button class="btn btn-primary" id="add_ingd"> 
 
    Add 
 
</button> 
 

 
<div class="text-left ingd-cont"> 
 
    <div class="btn-group incl-ingd"> 
 
    <div type="button" class="btn btn-default"> 
 
     Rooms <i class="fa fa-close">X</i> 
 
    </div> 
 
    </div> 
 
    <div class="btn-group incl-ingd"> 
 
    <div type="button" class="btn btn-default"> 
 
     Mansions <i class="fa fa-close">X</i> 
 
    </div> 
 
    </div> 
 
</div>