Question

我已经为我正在处理的项目实现了一个用户生成的关键字列表，使用jQueryUI自动完成来建议现有的关键字。

在选择自动填充建议时，返回的字符串将添加到div的html中，作为子div。

我想添加一个删除功能，用户可以在错误输入时删除子div。

我已尝试过Stackoverflow和其他地方的多个建议答案，但似乎无法使其正常工作。

我创建了一个包含相关元素的fiddle。

对我来说最合乎逻辑的解决方案是：

$('.keyword-entry').click(function(e){
    var id = $(this).closest('div').prop('id');
    $('#'+id).remove();
}

虽然看起来这不起作用。

虽然我非常感谢能够解决这个问题的方法，以免今天晚上我的咖啡供应量减少，但我也很欣赏为什么我出错了。

提前致谢。

Answer 1

活动代表团。

基本上，您在加载时尝试将事件附加到DOM中不存在的DOM元素。同样重写.click()处理程序：

$(document).on('click', '.trashYes', function () {
    $(this).remove();
});

小提琴： http://jsfiddle.net/6bBU4/

它正在做的是，它将.click()事件附加到document（最顶层的DOM元素）会向下移动以找到任何新的{{1因此成功执行.trashYes。这不必绑定到.remove()，而是绑定到文档中的任何DOM元素以及加载时。

Answer 2

无需获取ID，然后再尝试找到它，就这样做......

$('<div id="'+id+'" class="keyword-entry" style="z-index:0">'+ui.item.value+'   <--I want to remove this</div>')
    .appendTo($('#keyword-list'))
    .click(function(e){
        $(this).remove();
    });

添加关键字条目

删除动态生成的元素

2 个答案: