Противоположности Append в этой таблице с помощью JQuery

Question

мне нужна противоположность этого peice кода:

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 => '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 %>); }); 

, когда пользователь нажимает на кнопку удаления его необходимо удалить эту строку таблицы. Я знаю, что вы можете использовать .remove(), но я не уверен, как использовать это с im new для RoR.

Answer 1

вы можете сделать что-то вроде этого:

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

Убедитесь, что вы используете closest. parents вернет всех предков tr s, поэтому он может удалить больше узлов, чем необходимо, если у вас есть вложенные таблицы. closest - самый безопасный вариант.

Answer 2

Вот основной пример того, как вы хотите. Надеюсь, ты не возражаешь, но я раздели его на голые кости, но это должно дать вам хорошее представление о том, с чего начать.

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(); 
}); 

При щелчке удаления находит родительскую строку и удаляет его и добавить что-то делает подобное тому, что вы делаете в данный момент.

Answer 3

Вы можете использовать метод parent (добавить некоторые идентификаторы), чтобы указать на строку, которую хотите удалить, и использовать метод remove, чтобы удалить его.

Answer 4

Если предположить, что удаление находится внутри тр для каждой из строк, которые нужно сделать что-то вроде этого

если близкий buttton/изображение имеет класс близко затем связать событие на него, как это

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