Jquery添加行，然後刪除它們，如果不需要

Question

我很努力設置jquery插入新錶行，然後刪除它們，如果我不需要它們。

例如：

我有一個每個錶行兩個按鈕，就像這樣：

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

當我點擊「添加」按鈕，它會使用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寫什麼。

非常感謝您的幫助！

Answer 1

您可以添加一個類所產生的TR元素，那麼你可以簡單地選擇和使用刪除它們的jQuery remove方法：

$('table').on('click', '.remove', function(){ 
    $('tr.inserted').remove(); 
}); 

或者，如果你要選擇具有類似.id細胞下一行（ 假設他們有id類名），你可以使用nextAll方法：

$('#example').on('click', 'input[name="cmdRemRow"]', function() { 
    var $this = $(this), 
      id = $.trim($this.parent().siblings('.id').text()); 
    $this.closest('tr').nextAll().filter(function(){ 
     return $.trim($('td.id', this).text()) === id; 
    }).remove(); 
}) 

Answer 2

這裏是我落得這樣做：

第1步：我將行的id傳遞給子行（從ajax插入）。然後，我將這些數據的每個數據id設置爲該值。

第2步：如果點擊刪除按鈕的那一行，然後我會傳入該行的id，並只刪除data-id匹配該值的孩子。

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

如果有人有更好的方法，請添加您的意見我會歡迎不同的方法！謝謝！

Answer 3

通過ID刪除元素一次限制您刪除行1。我建議爲屬於AJAX請求的每一行分配一個類。爲了簡單起見，每個Ajax請求都需要唯一的類...您可以將一個時間戳附加到一個字符串並將其用作您的類名稱。

無論你構建表（無論是在服務器或客戶端），加上獨特的類：

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

現在，當您單擊按鈕，刪除不需要的行，所有你需要的是類的名稱來選擇要刪除的所有行...在這種情況下，它將刪除上面列出的兩行：

$('#example').click(function(){ 
    $('.uniquely_named_class').remove(); 
});