Javascript 无法删除使用.on方法附加的元素

jQuery决定变得愚蠢，或者我只是缺少了一些东西，但是使用以下代码删除附加元素对我来说不起作用：

$('#add-show').click(function() {
    if ( $('#fav-search').val() == '' ) {
        // do nothing
    }
    else {
        $('.fav-results').append('<code><a href="#"><span class="icon-remove"></span></a>' + $('#fav-search').val() + '</code>');
    }
});

$('.fav-results code').on('click', 'a', function() {
    $(this).parent().remove();
});

$（'#添加显示'）。单击（函数（）{
如果（$（'fav search'）.val（）=''）{
//无所事事
}
否则{
$（'.fav results'）.append（'
'+$（'#fav search'）.val（）+'
'）；
}
});
$（'.fav结果代码'）。在（'click'，'a'，function（）上{
$（this.parent（）.remove（）；
});

以及HTML，供感兴趣的人使用：

<div class="input-append">
    <input class="span2" id="fav-search" type="text">
    <button class="btn" type="button" id="add-show"><span class="icon-plus"></span></button>
</div>
<div class="pull-right fav-results">
    <?php foreach($shows as $show): ?>
        <code><a href="#"><span class="icon-remove"></span></a><?php echo $show['showname'] ?></code>
    <?php endforeach ?>
</div>

可以删除从数据库表中提取的现有标题，但不能删除任何附加元素

---

我最初使用的是.click处理程序，但我了解到它只适用于页面加载时DOM中存在的元素。在阅读了前面的相同性质的问题后，我改为使用.on，但它的作用仍然相同。

对于要应用于动态创建的元素的

单击
事件，您应该将其委托给祖先
，而不是
元素：

$(".fav-results").on("click", "code a", function() {
    $(this).parent().remove();
});

您使用的是
remove（）
而不是
detach（）
，这是在执行所有
code
元素之前删除它们的事件处理程序