0

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

<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 对象的方式是错误的，但我无法在其他地方找到解决方案。

非常感谢您的帮助！

4

1 回答 1

3

一些事情：

您的删除链接选择器错误 - 您正在搜索输入，而 link_to 生成锚标记。

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

此外，仅调用“父级”将获得最近的父级，而实际上您想要删除列表项。您应该使用“closest”，它会向上遍历 dom 树，直到找到匹配的元素。

您可以改用这样做：

$('#unordered_list li a').on('ajax:success', function(event){
    $(this).closest('li').remove();
})
于 2013-06-23T06:31:17.607 回答