How to dynamically add and remove html element with javasript in rails?

Question

I had this to dynamically add items in html

<td id="campus_list">
  <%= link_to_function image_tag("new.png", :width => 16) do |page|
    page.insert_html :bottom, 'campus_list', :partial => 'campus_selection'
  end %>
  <br/>
</td>

the template is like this

<div>
  <%= select_tag "campuses[]", options_for_select(AvailableCampuses.map{|item| [name, id]})) %>
  <%= link_to_function image_tag("destroy.png", :width => 16), "" %>
</div>

Since I do not know how to add unique id to each rendered div, I can not figure out how to remove each div using link_to_function.

Can you please help me on this?

Answer 1

you can use $(this).up('div').remove(); As the javascript in the link_to_function helper. What it does is

1. fetch the link node ($(this))
2. traverse the dom tree up until a div element is found (up('div'))
3. and remove said element (remove())