單擊相應的刪除按鈕從表中刪除行

Question

在給定的示例中，我遇到了一些問題。 我有三個項目的列表，所有項目都有一個刪除按鈕，當我單擊刪除按鈕時，相應的行將被刪除。 很好

現在我的問題是，如果我在列表中同時擁有所有三個項目，並且只想刪除第一個項目，然后單擊“第一個刪除”按鈕，它將刪除表中的所有行。

Here演示

Answer 1

那是因為您的第一個id為0，所以它刪除了所有元素，刪除了if條件，否則阻止了它的正常運行，如果要刪除整個表，則添加其他按鈕。

$('input[type=button]').click(function () {
    $(this).closest("tr").remove();
});

工作小提琴

Answer 2

您的代碼中有一個基本缺陷。

您只能將click綁定到按鈕標簽，但是在HTML中沒有按鈕標簽，有帶有按鈕類型的輸入標簽。

此后，您將創建一個名為“ id”的變量，在這種情況下，此變量是不必要的。 使用jQquery，您不需要此。

使用以下代碼行可以處理所有事情。 因此，簡化生活，並使其盡可能短。

$(this).parent().parent().remove();

就#divGrid為空而言，這是一個錯誤的語句，因為div永遠不會為空，除非您刪除整個#myTable子元素

您可以使用以下條件來做到這一點

if( $('#divGrid ').is(':empty') ) {
   $('#divGrid').html("All item removed");
}

這是您真正需要的僅3行jQuery的解決方案 。

編輯：這是一個小提琴，以檢查行為空，如果為空，則表將被文本“所有項目已刪除”替換

工作小提琴

Answer 3

嘗試這個

$(':button').click(function() {  
    $(this).closest("tr").remove();
});

演示http://jsfiddle.net/BLV2g/14/

為了更安全，按鈕將不會刪除其他地方

$('#myTable :button').click(function() {  
    $(this).closest("tr").remove();
});

Answer 4

嘗試這個，

function delSpec(rl)
  {    
     r=document.getElementById("insSpecc").rows.length;
     if(r!=2){
       document.getElementById("insSpecc").deleteRow(r-1)
     }
  }

演示http://jsfiddle.net/nKkhW/111/

Answer 5

我想這就是您想要做的：

$('#myTable :button').click(function () {
  $(this).parent().parent().remove();
  var rowCount = $('#myTable tr').length;
  if (rowCount == 1) {
    $('#divGrid').empty();
    $('#divGrid').html("All item removed");
  }
});

背后的邏輯是：

1. 只要單擊輸入類型按鈕，就會觸發jquery事件。
2. 刪除按鈕所在的tr內容。
3. 檢查標題行以外是否還有其他行；如果只有標題行，則替換標題。

演示版

Answer 6

由於第一個刪除按鈕的ID為del0 ，它將進入else子句並刪除所有三行。