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