Javascript 删除<；李>；问题

我正在构建一个配方保存应用程序，其中有一个如下所示的表单

如您所见，我在

中包含了一组表单元素。您可以单击添加配料，并将更多的li添加到字段中

我的问题是：

第一个李是唯一删除的李。如果您单击“添加配料”，然后尝试删除该配料，则什么都不起作用

有没有办法不让第一个李被删除，但所有后续李的旁边都有删除链接？（仅仅因为应该至少有一种成分？）

---

调用

clone（）

时，它不会复制事件。您需要调用

clone（true）

才能执行此操作，如中所述。

当您调用

clone（）

时，它不会复制事件。您需要调用

clone（true）

才能执行此操作，如中所述。

您没有在克隆的元素上放置事件侦听器。此外，您不应该为“删除”链接提供自己的id，因为这些链接需要是唯一的

要使第一个成分没有“删除”按钮，只需在标记中不包含一个按钮，而只动态创建并将其附加到克隆元素：

var deleteButton = $("<a class='float-left'>Delete</a>").click(deleteThis);
$('ul#listadd > li:first')
  .clone()
  .attr('name', 'ingredient' + newNum)
  .append(deleteButton)
  .appendTo('ul#listadd');

function deleteThis() {
    var li = $(this).closest('li')
    li.fadeOut('slow', function() { li.remove(); });
}

---

var deleteButton=$（“
您没有在克隆的元素上放置事件侦听器。此外，您不应该为“delete”链接提供自己的id，因为这些链接需要是唯一的

要使第一个成分没有“删除”按钮，只需在标记中不包含一个按钮，而只动态创建并将其附加到克隆元素：

var deleteButton = $("<a class='float-left'>Delete</a>").click(deleteThis);
$('ul#listadd > li:first')
  .clone()
  .attr('name', 'ingredient' + newNum)
  .append(deleteButton)
  .appendTo('ul#listadd');

function deleteThis() {
    var li = $(this).closest('li')
    li.fadeOut('slow', function() { li.remove(); });
}

var deleteButton=$（“

这是对1.点的回答。问题是，eventhandler绑定没有发生在新创建的元素中，因为此代码仅在页面加载时运行。这可以通过使用.live（）来解决。另一个问题是，id-s必须是唯一的。因此，在这里可以使用class.deleteThis来代替id


这为2.点增加了答案：

if ($("#listadd li").length == 1) {
    return;
}

如果列表仅包含1个li元素，则回调的其余部分将不会运行。

这是对1.点的回答。问题是，eventhandler绑定没有发生在新创建的元素中，因为此代码仅在页面加载时运行。这可以通过使用.live（）来解决。另一个问题是，id-s必须是唯一的。因此，在这里可以使用class.deleteThis来代替id


这为2.点增加了答案：

if ($("#listadd li").length == 1) {
    return;
}

如果列表仅包含1个li元素，则回调的其余部分将不会运行。
您正在添加动态添加到DOM的项，因此jQuery无法访问它们：）
在这种情况下，您可以使用以下代码：

$(document).on('click', '.selector', function(e) {

    //code here

});

其次，您正在加载一个相当旧的jQuery版本

第三，您试图选择一个ID已经存在的元素，而ID只能存在一次

最后，您两次定义链接的类，如下所示：

<a class='float-left' id="deletethis" href='#' class="deletethis">Delete</a>



这也带来了一个问题，因此我将其更改为如下所示的更正标记：

<a class='float-left deletethis' href='#'>Delete</a>



祝你好运：）我已经在这里更新了你的JSFIDLE：

您正在添加动态添加到DOM的项，因此jQuery无法访问它们：）
在这种情况下，您可以使用以下代码：

$(document).on('click', '.selector', function(e) {

    //code here

});

其次，您正在加载一个相当旧的jQuery版本

第三，您试图选择一个ID已经存在的元素，而ID只能存在一次。在更新的示例中，我将其更改为一个类

最后，您两次定义链接的类，如下所示：

<a class='float-left' id="deletethis" href='#' class="deletethis">Delete</a>



这也带来了一个问题，因此我将其更改为如下所示的更正标记：

<a class='float-left deletethis' href='#'>Delete</a>



祝你好运：）我已经在这里更新了你的JSFIDLE：

My fixed version My fixed version我的fixed version这样你永远不能删除第一个元素，即使你有其他元素。@Sylvanus:这正是OP要求的，读#2。这样你永远不能删除第一个元素，即使你有其他元素。@Sylvanus:这正是OP要求的，读#2。