Javascript Jquery添加行，如果不需要，则删除它们

我正在努力设置jquery来插入新的表行，如果不需要的话就删除它们

例如：

我在每个表格行上有两个按钮，如下所示：

 --------------------------------------
 |Add / Remove | Name  | Id | Color   |
 --------------------------------------
 |Add / Remove | Shirt | 1  | Blue    |
 --------------------------------------
 |Add / Remove | Shirt | 2  | Red     |
 --------------------------------------

当我点击Add按钮时，它将使用ajax获取数据并在当前行之后插入行。这是我的代码，工作正常：

 $(function() {
        $('#example').on('click', 'input[name="cmdAddRow"]', function() {
            var curRow = $(this).closest('tr');
            $.ajax({
                cache: false,
                type: 'POST',
                url: '{{ path('inventory_low_test_asin_data') }}',
                data: '',
                success: function(data)
                {
                    var newRow = data.htmlData;
                    curRow.after(newRow);
                }
            });
        });
    });

 --------------------------------------
 |Add / Remove | Name  | Id | Color   |
 --------------------------------------
 |Add / Remove | Shirt | 1  | Blue    |
 --------------------------------------
 | Inserted    | A     | 1  | Blue    | - Need to be able to remove this row
 --------------------------------------
 | Inserted    | B     | 1  | Blue    | - Need to be able to remove this row
 --------------------------------------
 | Inserted    | C     | 1  | Blue    | - Need to be able to remove this row
 --------------------------------------
 | Inserted    | D     | 1  | Blue    | - Need to be able to remove this row
 --------------------------------------
 |Add / Remove | Shirt | 2  | Red     |
 --------------------------------------

现在这是一个棘手的部分，如果我不需要插入的数据行，有时它会返回在当前行之后插入的20多行，我需要能够一次删除所有插入的行，而不是一次删除一行。当我单击该行的“删除”按钮时，这是如何处理的？我不确定为jQuery编写什么

---

非常感谢你的帮助

您可以向生成的tr元素添加一个类，然后使用jQuery remove方法简单地选择并删除它们：

或者，如果要选择具有类似.id单元格的下一行（假设它们具有id类名），则可以使用nextAll方法：

---

您可以向生成的tr元素添加一个类，然后使用jQuery remove方法简单地选择并删除它们：

或者，如果要选择具有类似.id单元格的下一行（假设它们具有id类名），则可以使用nextAll方法：

---

以下是我最后做的：

步骤1：我将行的id传递给从ajax插入的子行。然后，我将其中每一个的数据id设置为该值

 $('#example').on('click', 'input[name="cmdRemRow"]', function() {
      var theID = $(this).data('asin');
      $("tr[data-id='" + theID + "']").remove();
 }); 

步骤2：如果为该行单击了删除按钮，那么我将传入该行的id，并仅删除其数据id与该值匹配的子项

 $('#example').on('click', 'input[name="cmdRemRow"]', function() {
      var theID = $(this).data('asin');
      $("tr[data-id='" + theID + "']").remove();
 }); 

---

如果有人有更好的方法，请添加您的意见，我将欢迎不同的方法！谢谢

以下是我最后做的事情：

步骤1：我将行的id传递给从ajax插入的子行。然后，我将其中每一个的数据id设置为该值

 $('#example').on('click', 'input[name="cmdRemRow"]', function() {
      var theID = $(this).data('asin');
      $("tr[data-id='" + theID + "']").remove();
 }); 

步骤2：如果为该行单击了删除按钮，那么我将传入该行的id，并仅删除其数据id与该值匹配的子项

 $('#example').on('click', 'input[name="cmdRemRow"]', function() {
      var theID = $(this).data('asin');
      $("tr[data-id='" + theID + "']").remove();
 }); 

---

如果有人有更好的方法，请添加您的意见，我将欢迎不同的方法！谢谢

按ID删除元素会限制您一次删除1行。我建议为属于AJAX请求的每一行分配一个类。每个ajax请求的类都必须是唯一的……为了简单起见，您可以在字符串中附加一个时间戳，并将其用作类名

无论在服务器端还是客户端构建表，请添加唯一类：

<tr class="uniquely_named_class">data....</tr>
<tr class="uniquely_named_class">data2....</tr>

---

按ID删除元素会限制您一次删除1行。我建议为属于AJAX请求的每一行分配一个类。每个ajax请求的类都必须是唯一的……为了简单起见，您可以在字符串中附加一个时间戳，并将其用作类名

无论在服务器端还是客户端构建表，请添加唯一类：

<tr class="uniquely_named_class">data....</tr>
<tr class="uniquely_named_class">data2....</tr>

---

我已经尝试过，但它没有按需要工作：$'example'。在“单击”时，输入[name=cmdRemRow]'，函数{$this.closest'tr'.remove；}；您可以发布这些添加行的HTML标记吗？它没有按需要工作发生了什么？是否有错误？Do nextUntil查找单击removebutton直到下一正常行的行之后的所有行，并将其删除。您是否碰巧有这样一个示例：Do nextUntil查找单击removebutton直到下一正常行的行之后的所有行，并将其删除。谢谢我已经尝试过，但它没有按需要工作：$'example'。在“单击”时，输入[name=cmdRemRow]'，函数{$this.closest'tr'.remove；}；您可以发布这些添加行的HTML标记吗？它没有按需要工作发生了什么？是否有错误？Do nextUntil查找单击removebutton直到下一正常行的行之后的所有行，并将其删除。您是否碰巧有这样一个示例：Do nextUntil查找单击removebutton直到下一正常行的行之后的所有行，并将其删除。谢谢谢谢你的例子！它运行得非常好，只是删除了所有其他父行。很抱歉我对jquery一无所知，但是您如何防止它删除父行呢。还有一个警告，假设有两个父行添加了插入的ajax数据，它也会删除这些行：@user1775416不客气，你能提供一个演示并指定应该删除什么吗？如果没有看到您的标记，我无法提供一个工作示例。感谢您的示例！它运行得非常好，只是删除了所有其他父行。很抱歉我对jquery一无所知，但是您如何防止它删除父行呢。是否有人告诉它不要删除行

---

如果数据名=parent？还有一个警告，假设有两个父行添加了插入的ajax数据，它也会删除这些行：@user1775416不客气，您能提供一个演示并指定应该删除的内容吗？如果没有看到您的标记，我无法提供一个有效的示例。