刪除畢竟其他行已被刪除

Question

我有一個表，看起來像這樣的標題行：

<table> 
<tr id="header"> 
    <th>Title</th> 
    <th>Title</th> 
</tr> 
<tr id="1" class="record"> 
    <td><a class="delbutton">X</a></td> 
    <td>Some Data</td> 
</tr> 
<tr id="2" class="record"> 
    <td><a class="delbutton">X</a></td> 
    <td>Some Data</td> 
</tr> 
</table> 

而且我有一個jQuery腳本：

$(function() { 
    $(".delbutton").click(function(){ 

     //Save the link in a variable called element 
     var element = $(this); 

     //Find the id of the link that was clicked 
     var del_id = element.attr("id"); 

     //Built a url to send 
     var info = 'del_id=' + del_id; 
     if(confirm("Are you sure you want to delete this entry? This cannot be undone.")) { 
      $.ajax({ 
       type: "GET", 
        url: "delete_entry.php", 
        data: info, 
        success: function(){ 
      } 
     }); 

     $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast") 
     .animate({ opacity: "hide" }, "slow"); 
    } 
    return false; 
    }); 
}); 

我是什麼試圖做的是刪除標題行（id =「header」），或者更好的是，刪除最後一個數據行之後的其餘表。

任何指導意見將是巨大的

更新： 以下湯姆的建議後，我試圖計算的行。 我試着用：

$('.record').size() 

但始終報告行的初始數量 - 它從來沒有準確地報告行數我刪除行之後。是否有可能以某種方式跟蹤剩餘的行？

分辨率 這工作：

$(function() { 
    $(".delbutton").click(function(){ 

     //Save the link in a variable called element 
     var element = $(this); 

     //Find the id of the link that was clicked 
     var del_id = element.attr("id"); 

     //Built a url to send 
     var info = 'del_id=' + del_id; 
     if(confirm("Are you sure you want to delete this entry? This cannot be undone.")) { 
      $.ajax({ 
       type: "GET", 
        url: "delete_entry.php", 
        data: info, 
        success: function(){ 
      } 
     }); 

     $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast") 
     .animate({ opacity: "hide" }, "slow"); 
        //Remove - don't just hide       
        $(this).parents(".record").remove(); 

        //If there are no more deleteable rows, delete the header 
     if($('.record').length == 0) { 
      $('#existTitle').animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow"); 
     } 
    } 
    return false; 
    }); 
}); 

Answer 1

抓住桌子，我假設你可以用$得到它（本）。家長（ 「記錄 」），父母（「 表」） ，檢查child rows it has的編號，如果它是1或0，則刪除元素（或淡出）。

Answer 2

你可能想要把動畫隱藏在有條件的

if(confirm("Are you sure you want to delete this entry? This cannot be undone.")) { 
    $.ajax({ 
    type: "GET", 
    url: "delete_entry.php", 
    data: info, 
    success: function() { 
     // change this animation to whatever you want 
     $(this).parent().animate({ opacity: "hide" }, "slow"); 
    } 
} 

行通過這種方式，如果人確認他們希望刪除的行只是消失。 然後，與該動畫一起做另一個檢查以查看是否有剩餘的行（使用子級或同級和.size（）） 如果不使用相同的代碼（使用您選擇的動畫）隱藏標題行：

$("#header").animate({ opacity: "hide" }, "slow"); 

Answer 3

（見第一個問題上意見） 替代去除 - 使用addClass/removeClass - 再算上與/這些行無類 - 與之比較的總，看看有多少行可見。 。

$(this).parents(".record").addClass("removedrow"); 
var removedRowsCount = $('#myTable tr.removedrow').length; 

的完整性：

$(this).parents(".record").addClass("removedrow").animate({ backgroundColor: "#fbc7c7" }, "fast") 
     .animate({ opacity: "hide" }, "slow"); 
var removedRowsCount = $('#myTable tr.removedrow').length; 
if (removedRowsCount < ($('#myTable tr').length -1)) 
{ 
    $(this).parents(".header").addClass("removedrow").animate({ 
     backgroundColor: "#fbc7c7" }, "fast") 
     .animate({ opacity: "hide" }, "slow"); 
};