javascript - 使用 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 生成 anchor 标记。

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

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

您可以使用这样做:

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