使用AJAX删除Rails任务项失败：无法隐藏已删除项

我来帮你排查这个问题，看起来你的AJAX删除逻辑已经走通了，但DOM元素隐藏的环节出了点小问题，咱们一步步来解决：

1. 先修复控制器的destroy方法（关键！） #

你当前的destroy方法里缺少了获取任务的代码，如果没有先找到对应的@task，不仅销毁操作可能失败，返回的JSON也会没有id字段，前端自然找不到要隐藏的元素。修改控制器代码：

def destroy
  @task = Task.find(params[:id]) # 新增这行，先定位要删除的任务
  @task.destroy
  render json: @task
end

2. 修正事件绑定方式（适配Turbolinks） #

因为你用了Turbolinks，直接绑定在元素上的ajax:success事件只会在第一次页面加载时生效，后续通过Turbolinks加载的页面元素不会触发事件。改用事件委托或者在Turbolinks加载事件里绑定：

修改application.js：

$(document).on('turbolinks:load', function() {
  // 把事件绑定到document上，监听所有删除链接的ajax:success事件
  $(document).on('ajax:success', '.delete', function(event, data) {
    // 直接通过当前点击的删除链接，找到它所在的任务li元素并隐藏
    $(this).closest('[data-js-task-id]').hide();
  });
});

这种方式的好处是，不管任务元素是页面初始加载的还是后续通过AJAX新增的，事件都能正常触发。

3. 规范HTML属性写法 #

你的li元素的data-js-task-id属性没有加引号，虽然数字ID可能不会出问题，但这不符合HTML规范，也可能在某些场景下导致选择器失效。修改index.html.erb：

<li data-js-task-id="<%= task.id %>" class="task">
  <%= link_to task.title, task, class: "task-title text-dark ml-2" %>
  <%= link_to '', task, remote: true, method: :delete, class:"far fa-trash-alt text-dark icon delete", title: "Delete" %>
</li>

额外优化：简化前端逻辑 #

之前你通过xhr.responseJSON.id获取任务ID，其实回调函数的第二个参数data就是控制器返回的JSON对象，直接用data.id更简洁。不过上面的方案里我们用closest直接定位元素，连ID都不需要取了，逻辑更简单可靠。

做完这些修改后，再测试删除操作，应该就能正常隐藏对应的任务项了。

内容的提问来源于stack exchange，提问作者user10928060