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

我想删除使用.append（）创建的div

例如： HTML

添加
房间
豪宅

JS

$（“#添加”）。在（'click'，函数（e）上{
var ti=$（'#type_ingd'）.val（）；
美元（“.ingd cont”）。追加（“+ti+”）；
});
$（“i.fa-close”）。在（'click'，函数（e）{
移除（这个）；
});
功能删除（此续）{
$（thiscont）.closest（'div.incl-ingd'）.remove（）；
变量iiv=$（“.incl ingd:可见”）。长度；
如果（iiv==0）{
$（“#find recp btn”）.attr（'style'，'display:none；'）；
}
}

首先，我尝试输入一个单词（例如：kitchen），然后单击

Add

按钮

然后，单词将附加在

ingd cont

中

问题是当我点击单词的

fa close

时，它没有被删除

---

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

问题在于您的选择器

$（“I.fa-close”）。在（'click'，函数（e）{…}）不捕获动态添加的元素上的事件

可以将选择器更改为，以捕获动态添加的元素：


$（.ingd cont”）。关于（'click'，'i.fa-close'，函数（e）{
移除（这个）；
});问题在于选择器
$（“i.fa-close”）。在（'click'，函数（e）{…}）上不捕获动态添加的元素上的事件

可以将选择器更改为，以捕获动态添加的元素：


$（.ingd cont”）。关于（'click'，'i.fa-close'，函数（e）{
移除（这个）；
});无法在尚不存在的元素上创建事件侦听器。研究术语“event delegation”@charlietfl，以便永远不会删除append div？如果您按照下面的答案委托事件侦听器，则肯定会删除。您不能在尚不存在的元素上创建事件侦听器。研究术语“event delegation”@charlietfl，以便永远不会删除append div？如果您按照下面的答案委托事件侦听器，那么它肯定会删除！谢谢现在我知道jquery上有一个事件委派的东西。哇，它工作了！谢谢现在我知道jquery上有这样一个事件委托。
            <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>

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