Supprimer une ligne d'en-tête après toutes les autres lignes ont été supprimées

Question

j'ai une table qui ressemble à quelque chose comme ceci:

<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> 

Et j'avoir un script 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; 
    }); 
}); 

Ce que je suis essayer de faire est de supprimer la ligne d'en-tête (id = "header"), ou mieux encore, la table restante après la dernière ligne de données a été supprimée.

Toute orientation serait grande

Mise à jour: Après avoir suivi la recommandation de Tom j'ai essayé de compter les lignes. J'ai essayé avec:

$('.record').size() 

mais qui rapporte toujours le nombre initial de lignes - il ne retourne jamais avec précision le nombre de lignes après que je supprimer une ligne. Est-il possible de garder une trace des lignes restantes en quelque sorte?

Résolution Cela a fonctionné.

$(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

Prenez la table, je suppose que vous pouvez obtenir avec $ (ce) .parents ("enregistrement ") les parents (" table") , vérifiez le numéro de child rows it has et s'il s'agit de 1 ou de 0, supprimez l'élément (ou supprimez-le).

Answer 2

Vous pourriez vouloir mettre l'animation pour cacher la ligne dans la

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"); 
    } 
} 

conditionnelle De cette façon, la ligne ne disparaît que si la personne confirme qu'ils veulent supprimer. Puis, avec cette animation, faites une autre vérification pour voir s'il reste des lignes (en utilisant enfants ou frères et soeurs et .size()) Si ce n'est pas masqué la ligne d'en-tête en utilisant le même code (avec l'animation de votre choix):

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

Answer 3

(voir les commentaires sur la question première) alternative à la suppression - utiliser le addClass/removeClass - puis compter les lignes avec/sans la classe - comparer au total à voir le nombre de lignes sont visibles.

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

complet:.

$(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"); 
};