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，因此如果您有嵌套表，它可能会删除比所需更多的节点。 closest是最安全的选择。

Answer 2

假设您的删除位于每个行的tr内，您需要执行类似

的操作

如果关闭的按钮/图像有一个类关闭，那么就像这样绑定一个事件

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

Answer 3

以下是您希望如何做的基本示例。我希望你不介意，但我已经把它剥掉了，但它应该让你知道从哪里开始。

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

当点击删除时，它会找到父行并将其删除，而Add会执行类似于您当前正在执行的操作。

Answer 4

您可以使用parent方法（添加一些标识符）指向要删除的行，而不是使用remove方法实际删除它。

与使用jquery在此表中追加相反

4 个答案: