使用AJAX删除一个项目，而不刷新页面

Question

我正在构建一个待办事项应用程序，我试图删除一个项目，而不必呈现一个新的页面。以下是我的待办事项列表的代码。

<ul id="unordered_list"> 
    <div class="to_do_list"> 
    <% @list.each_with_index do |list, i| %> 
     <li data-index="<%= i %>"> 
     <%= link_to list.title, '#' %> 
     <ol id="list_items_<%= i %>" class="hidden"></ol> 
     <div delete-index="<%= i %>"> 
      <%= link_to "Delete", to_do_list_url(list), 
      :method => :delete, :remote => true %> 
     </div> 
     </li> 
    <% end %> 
    </div> 
</ul> 

我的问题是我如何使用AJAX删除项目，当我点击删除按钮？我试图做到这一点

$('#unordered_list').find('input:delete').on('ajax:success', function(event){ 
    $(event.currentTarget).parent().remove(); 
}) 

有人能告诉我我做错了什么吗？我想我试图检索jQuery对象被点击并被删除的方式是错误的，但我一直无法在其他地方找到解决方案。

非常感谢您的帮助！

Answer 1

几件事情：

您的删除链接选择是错的 - 你正在寻找一个输入，而产生的link_to一个锚标记。

此外，在回调函数中，您可以使用“this”来获取触发事件的元素（链接）。

此外，只要调用“父母”将获得最接近的父母，实际上当您想删除该列表项目时。你应该使用“最接近”，它遍历dom树直到找到一个匹配的元素。

您可以使用做到这一点，而不是：

$('#unordered_list li a').on('ajax:success', function(event){ 
    $(this).closest('li').remove(); 
})