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();
})

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

1 个答案: