javascript - 如何在 Jquery 中选择 html 元素的特定实例？

Question

我有一个待办事项列表应用程序，允许用户创建待办事项。现在我正在使用 jquery 构建允许用户删除任务的功能。

问题是，当我单击一个待办事项上的删除按钮时，应用程序会要求我确认删除每个列表项。当我在其中一个上单击“取消删除”时，所有这些都会取消。换句话说，我在所有 HTML 元素上收到重复的行为。

我相信这是因为所有待办事项都是从同一个 html.erb 模板生成的，并且在模板中我为每个元素提供了 ID，以便我可以引用它，但是因为每个 ID 都是相同的，我无法区分包含具有相同 ID 的元素的不同待办事项。 如何在 Jquery 中选择 html 元素的特定实例？

完整的 JS 代码/HTML 输出: http://jsfiddle.net/LvKED/

Rails html.erb 代码:

<%= form_for task do |form| %>
  <li>
<% if !task.completed %>
    <p> <%= task.title%></p>
    <p>&ndash; <%=task.body %></p>
     <%= form.check_box :completed, class: "completed_checkbox" %>
     <%= button_to "Delete post",{}, class:"delete_button" %>
     <%= link_to "Confirm deletion",{}, class: "confirm_links", id: "confirm_delete" %>
     <%= link_to "Cancel",{}, class: "confirm_links cancel_delete" %>
     </li>
   <% end %>
<% end %>

Answer 1

Ishita 的答案似乎是正确的，但我还没有资格评论他的答案。我认为你必须将“event.target”包装在 $() 中，所以它是:

var targetElement = $(event.target).closest('li');

希望有帮助。