Rails - 在销毁包含对象后删除li

Question

I'm building a project app for a full stacking dev bootcamp program. I'm implementing a destroy method which removes a given item from a list. I'm implementing an AJAX request which should remove the item's li from the list. The destroy method is working as should, meaning that when I reload the page the element is gone, but it isn't happening without reloading the page.

My items are rendered via a partial:

<ul class="list-group">
  <% @list.items.each do |item| %>
    <!-- <li id="item-<%= @item.id %>" class="list-group-item"> -->
    <li class="list-group-item">
      <%= item.name %>
      <%= link_to "", [item.list, item], method: :delete, remote: true, class: 'glyphicon glyphicon-ok' %>
    </li> 
  <% end %>
</ul> 

My destroy.js.erb file:

<% if @item.destroyed? %>
  $('#item-' +<%= @item.id %>).hide();
  // $('#item-' +<%= @item.id %>).closest('li');
  // self.closest('li').remove();
  // $('li#item-<%= @item.id %>').hide();
  // $('#item-' +<%= @item.id %>).parent().remove();
  // $("li").remove('li#item-<%= @item.id %>');
<% else %>
  $('#item-' +<%= @item.id %>).prepend("<div class='alert alert-danger'><%= flash[:error] %></div>");
<% end %>

In my items_controller.rb:

def destroy
    @list = List.find(params[:list_id])
    @item = Item.find(params[:id])

    authorize @item

    if @item.destroy
      flash[:notice] = "Task Completed."
      # redirect_to @list
    else
      flash[:error] = "Task couldn't be deleted. Try again."
    end

    respond_to do |format|
      format.html
      format.js 
    end
  end

Terminal output when selecting list item to be deleted:

Started DELETE "/lists/28/items/105" for ::1 at 2015-04-13 16:51:57 -0400
Processing by ItemsController#destroy as JS
  Parameters: {"list_id"=>"28", "id"=>"105"}
  List Load (0.1ms)  SELECT  "lists".* FROM "lists" WHERE "lists"."id" = ? LIMIT 1  [["id", 28]]
  Item Load (0.0ms)  SELECT  "items".* FROM "items" WHERE "items"."id" = ? LIMIT 1  [["id", 105]]
  User Load (0.1ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["id", 8]]
   (0.1ms)  begin transaction
  SQL (0.2ms)  DELETE FROM "items" WHERE "items"."id" = ?  [["id", 105]]
   (1.5ms)  commit transaction
  Rendered items/destroy.js.erb (0.6ms)
Completed 200 OK in 10ms (Views: 5.9ms | ActiveRecord: 2.0ms)

The commented out lines are various methods I have tried to get the element to remove. Any help is greatly appreciated.

Answer 1

When you output the li you should attach dom_id(@item) so you can reference it later

<li class="list-group-item" id="<%= dom_id(@item) %>">

Then you should be able to

$("#<%= dom_id(@item) %>").remove();

---

Also, this is kind of bad because you're not verifying that @item belongs to a particular @list

@list = List.find(params[:list_id])
@item = Item.find(params[:id])

This is better

@list = List.find(paramas[:list_id])
@item = @list.items.find(params[:id])

Before this change:

DELETE /lists/1/items/2

Would work even if Item#2 doesn't belong to List#1.

After this change:

DELETE /lists/1/items/2

Will not work unless Item#2 belongs to List#1

Answer 2

You could use these lines of html

<% @list.items.each do |item| %>
    <li id="item-<%= item.id %>" class="list-group-item">
    ....

so you have a unique identifier for every item. not sure why you have commented it out.

Then do this in your destroy.js.erb

var item = $('li#item-' + <%= @item.id %>);
item.hide();
// or
item.remove();

Your controller and server response look fine.