Противоположность добавления в эту таблицу, используя jquery

Question

Мне нужно противоположность этой части кода:

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(), но я не уверен, как это использовать, так как я новичок в RoR.

Answer 1

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

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

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

Answer 2

Предполагая, что ваше удаление находится внутри tr для каждой строки, вам нужно сделать что-то вроде этого

если кнопка закрытия / изображение имеет класс close, то связать с ним событие следующим образом

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

Answer 3

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

Answer 4

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

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

При нажатии на кнопку "Удалить" он находит родительскую строку и удаляет ее, а "Добавить" делает нечто похожее на то, что вы делаете в данный момент.