我想删除使用 .append() 创建的 div
示例: 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
时没有删除的单词..
我不确定这是否可能,但如果可以,请帮助我:)
最佳答案
问题出在您的选择器 $("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>
关于javascript - 如何删除在 jquery 中使用 .append() 创建的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41992354/