Javascript 删除跨度问题

我有一个recipes应用程序，如下所示：

在配料范围的末尾是一个删除按钮。出于某种原因，我的代码不起作用（这意味着它没有删除成分范围）：

HTML:

应该发生的是，当我单击X时，最近的跨度（包含的跨度）被删除。但当我点击它时，什么也没发生。有什么建议吗？谢谢你的帮助

---

编辑

---

这里有一个JSFIDLE:

这里的问题是您正在将事件处理程序附加到文档中尚未包含的元素。最简单的解决方案是使用上的

将事件处理委托给祖先元素：

$('.formelementcontainer').on('click', '.deleteThis', function () {
    var span = $(this).closest('span');
    console.log(span);
    span.fadeOut('slow', function () {
        span.remove();
    });
});

您可以看到一个演示。
这里的问题是您正在将事件处理程序附加到文档中尚未包含的元素。最简单的解决方案是使用

上的

将事件处理委托给祖先元素：

$('.formelementcontainer').on('click', '.deleteThis', function () {
    var span = $(this).closest('span');
    console.log(span);
    span.fadeOut('slow', function () {
        span.remove();
    });
});

您可以看到一个演示。
您可以在一个窗口中进行设置吗？这样更容易找出问题所在。您应该纠正的第一个问题是，有多个元素具有相同的ID。ID在文档中是唯一的。尝试将它们重写为类。另外，任何被克隆的东西都应该被重新分配一个唯一的ID，或者完全依赖于类。@andyzinser当然，这里：@Asad，好的，我在我的jsfiddle中重写了它们。你能在一个？这样更容易找出问题所在。您应该纠正的第一个问题是，有多个元素具有相同的ID。ID在文档中是唯一的。尝试将它们重写为类。而且，任何被克隆的东西都应该被重新分配一个唯一的ID，或者完全依赖于类。@andyzinser当然，这里：@Asad，好的，我在我的JSFIDLE中重写了它们
$('.formelementcontainer').on('click', '.deleteThis', function () {
    var span = $(this).closest('span');
    console.log(span);
    span.fadeOut('slow', function () {
        span.remove();
    });
});