Question

相反，它正在删除所有表行。我知道有一些方法可以使用父/子选择器选择该行但不确定正确的组合

$("#add-another-essay").click(function(){
  event.preventDefault();
  $('tbody').append("<tr class='essays-new-table-row'>"+$('.essays-new-table-row').html()+"</tr>")
}); 

$("#remove-another-essay").click(function(){
  event.preventDefault();

  $('.essays-new-table-row').remove();
});

Answer 1

删除点击的行：

$(this).closest('tr').remove();

而不是：

$('.essays-new-table-row').remove();  //this removes all rows with that class

JS Fiddle demo

Answer 2

目前您的代码存在一些问题。首先，你要创建＆＃34;删除＆＃34;按钮元素通过jquery，但您在实际存在之前初始化该按钮的click事件。

//Add
$("#add-another-essay").click(function(){ ... });

其次是

//Remove
$("#remove-another-essay").click(function(){ ... });

在你的＆＃34;添加＆＃34;函数，你正在创建一个id为＃34; remove-another-essay＆＃34;的新行。这意味着没有名为＆＃34;删除 - 另一篇论文＆＃34;直到单击添加按钮。当页面首次加载时，您的＆＃34;删除＆＃34;函数不适用于任何东西，因为$（＆＃34; #remove-another-essay＆＃34;）在您点击＆＃34;添加＆＃34;之前不存在。解决方案是初始化你的＆＃34;删除＆＃34;功能在＆＃34;添加＆＃34;功能。 See Demo

$(".add-another-essay").click(function(){
    //build the elements for the row
    $row = $("<tr></tr>");
    $data = $("<td>My Data String</td>");
    $btn = $("<td><button class='remove-another-essay'>Remove</button></td>");

    //put the row together
    $row
        .append($data)
        .append($btn);

    //append the row to the table body
    $('tbody').append($row);

    //IMPORTANT - initialize remove-another-essay button click handler each time a new row is added.
    $(".remove-another-essay").click(function(){
        $(this).closest('tr').remove();
    });
});

此外，您不应该在JQuery中为html元素动态生成id。只需使用类：

$(".remove-another-essay") OR <button class="remove-another-essay">Remove</button>

之前的回答并没有完全解决他在通过JQuery创建表行的OP代码。假设他出于某种原因必须这样做，我已经做了一个稍微不同的小提琴来解释这些要求。 See Demo

我试图在表中添加一个删除按钮，只在jquery中删除该表行。

2 个答案: