The opposite of append in this table using jquery

I need the opposite to this peice of code:

if( $('#effort_<%= @project_task.id %>').length == 0 )
  $('#task_list').append('<tr><td><%= @project_task.project.project_number %> <%= @project_task.project.project_name %> - <%= @project_task.task_name %></td>' +
                         '<td><%= text_field :effort, :hours, :name =开发者_如何学JAVA> 'effort_' + @project_task.id.to_s, :id => 'effort_' + @project_task.id.to_s %></td>' +
                         '<td><%= link_to image_tag('icons/delete.png'), :method => :destroy, :remote => true %></td></tr>' );
  $('#effort_<%= @project_task.id.to_s %>').change( function() { submiteffort( this, <%= @project_task.id.to_s %>); } );

when the user clicks the delete button it needs to delete that row of the table. I know you can use .remove() but im not sure how to use this since im new to RoR.

---

You can do something like this:

$("#task_list a").live("click", function(event) {
  $(event.target).closest("tr").remove();
});

Make sure you use closest. parents will return all the ancestor trs so it might remove more nodes than needed if you have nested tables. closest is the safest option.

---

assuming your delete is inside the tr for each of the rows you need to do something like this

if the close buttton/image has a class close then bind an event on it like this

$('close').live("click",function()
{
    $(this).parents("tr").remove();   //this here is referring to the button 
});

---

Here is a basic example of how you want to do. I hope you dont mind but I've stripped it down to bare bones but it should give you a good idea of where to begin.

JSFiddle: http://jsfiddle.net/saceh/1/

<button id="Add">Add Row</button>
<hr>
<table id="TaskList">
</table>

<script>
// RowId is not important, just used to show you that rows are dynamically added
var RowId = 0;

$("#Add").click(function (e) {
    $("#TaskList").append("<tr><td>" + RowId  + "</td><td><button id='Delete'>Delete</button></td></tr>");
    RowId++;
});

$("#Delete").click(function(e) {
   var Row = $(this).parents('tr');
   $(Row).remove(); 
});

When delete is clicked it finds the parent row and removes it and Add does something similar to what you are doing at the moment.

---

You can use parent method (add some identifiers) to point to the row you want to delete and than use the remove method to actually remove it.