How can rails remove a table row after an ajax call to delete it?

Question

If I have a link -

= link_to 'ajaX', 
  ajax_delete_link_path(link), 
  data: { :confirm => 'Are you sure?', :remote => true } 

with a route:

get 'ajax_delete_link/:id', to: 'links#ajax_delete_link', as: :ajax_delete_link

and a link controller:

def ajax_delete_link
  @link = Link.find(params[:id])
  @link.destroy
  respond_to do |format|
    format.js
  end 
end 

and ajax_delete_link.js.erb with

var element = document.getElementById("id");
element.parentNode.removeChild(element);
# This is the part that doesn't work. Not sure how to access the id

The controller deletes the database record but doesn't update the page. I am trying to remove the parent table row of the td that contains the a

html for that is

        ...
        <td>
          <a href="/ajax_delete_link/396" data-confirm="Are you sure?" data-remote="true">ajaX</a>
        </td>

Answer 1

You'll be best doing the following

---

Structure

#config/routes.rb
resources :links #-> will provide DELETE domain.com/ajax/:id as destroy action

Your routes need to be structured around objects. Considering you're trying to create a destroy action, you should be able to send an ajax request to it to get it to work properly

This will give you the ability to do the following:

#app/views/controller/your_page.html.erb
<%= link_to "Ajax", link_path(link), method: :delete, id: link.id, data: { confirm: "Really?", remote: true } %> 

This will send an ajax (XHR) request to your links controller destroy action, which you can populate as follows:

#app/controllers/links_controller.rb
Class LinksController < ApplicationController
   def destroy
       @link = Link.find parmas[:id]
       @link.destroy
   end
end

--

Response

The response you have is directly associated with how you're managing the mime type in your controller.

If you use the format.js technique, you can call the @instance method set in your controller to remove the element in question. If you use the standard Ajax callbacks, you'll have a different challenge:

#app/controllers/links_controller.rb
Class LinksController < ApplicationController
   def destroy
     ...
     respond_to do |format|
       format.js #-> loads /links/destroy.js.erb
       format.html { redirect_to(links_url) }
      end
   end
end

This will give you the ability to create the following:

#app/views/links/destroy.js.erb
var element = document.getElementById("<%=j @link.id %>");
element.parentNode.parentNode.remove();

Alternatively, you can use the ajax success function to facilitate the callback, like so:

#app/assets/javascripts/application.js
$(document).on("ajax:succes", "a", function(data){
    $(data.id).remove();
});

Answer 2

I think your question is about how to refer to the element id in your js.erb template. It's a erb, so you can do just:

var element = document.getElementById(<%= @link.id %>);
alert(element); //just to see that it's getting to your template.
element.parentNode.removeChild(element);

Just reminding that you will need an html element with id set as:

id="<%= link.id %>"