记录:实作delete ajax和一些bug

在做简历项目的时候,发现每次删除都要刷新页面是一件用户体验很不好的点。于是想着用ajax功能来实现删除。 其实原因很简单,在后台删除数据的同时把前端相应的组件也就好了。 给相应的组件加入class,<div class="col-md-3 col-sm-6 col-xs-12 delete_<%= resume.id %>"> 新增app/views/user/resumes/destroy.js.erb,加入以下代码 $('div').remove(".delete_<%= @resume.id %>"); 修改destroy action并在view的删除链接上加入remote: true

  def destroy
    @resume = Resume.destroy(params[:id])
    respond_to do |format|
       format.html { redirect_to user_resumes_path }
       format.js
     end
  end

之前js尝试是这么写的$('#delete_<%= @resume.id %>').remove();发现并不起作用。查找jQuery文档,发现要这么写$('div').remove('#delete_<%= @resume.id %>'); 但是还是不起作用,google到的答案是不能用id来定位要用class,修改成上面的样子。

.remove() should remove all of them. I think the problem is that you're using an ID. There's only supposed to be one HTML element with a particular ID on the page, so jQuery is optimizing and not searching for them all. Use a class instead.

原因是id只可以移除一个html的元素,但我们要移除块所以就要用class。answer