Wie entfernt man ein Div, das mit .append() in jquery erstellt wurde?

Question

Ich möchte die div erstellt mit .append()

Beispiel entfernen: 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;'); 
       } 
      } 

Zuerst versuche ich ein Wort eingeben (zB: Küche) Klicken Sie dann auf die Schaltfläche Add.

Dann wird das Wort innerhalb der ingd-cont anhängen.

Und das Problem ist, wenn ich die fa-close des Wortes klicken, um es nicht entfernt wird ..

Ich bin mir nicht sicher, ob dies möglich ist, aber wenn es ist, bitte helfen Sie mir :)

Answer 1

Das Problem liegt an Ihrem Selektor $("i.fa-close").on('click', function(e) {...});, der keine Ereignisse für Elemente erfasst, die dynamisch hinzugefügt wurden.

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

Hier arbeitet Beispiel: auch die dynamisch hinzugefügt Elemente zu fangen

Der Wähler kann in diese geändert werden. Ich stellte etwas Code, um es richtig funktioniert zu machen;)

$("#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>