Javascript 使用AJAX删除项目而不刷新页面

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

<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>

谁能告诉我我做错了什么？我认为我试图检索要单击和删除的jQuery对象的方式是错误的，但我还没有在其他地方找到解决方案

非常感谢你的帮助

几件事：

“删除”链接的选择器错误-您正在搜索输入，而“链接到”将生成锚定标记

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

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

您可以使用“执行此操作”：

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

几件事：

“删除”链接的选择器错误-您正在搜索输入，而“链接到”将生成锚定标记

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

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

您可以使用“执行此操作”：

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