Question

我想删除使用.append（）

创建的div

实施例： HTML

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

JS

Add

首先，我尝试输入一个单词（例如：kitchen），然后点击ingd-cont按钮。

然后该词将附加在fa-close内。

问题是当我点击它未删除的单词SearchResultCollection时..

我不确定这是否可行，但如果是，请帮助我：）

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>

如何删除在jquery中使用.append（）创建的div？

1 个答案: