jQuery masquer l'en-tête ul lorsque toutes les entrées sont supprimées

Question

Je suis un noob avec jQuery ... et j'espère avoir bien expliqué cela; J'ai un en-tête <ul> qui apparaît lorsque j'ai ajouté une entrée à une liste créée dynamiquement en utilisant $.post. Chaque entrée ajoutée a un bouton delete/edit associé.

tête est le suivant:

<ul class="header"> 
    <li>Month</li> 
    <li>Year</li> 
    <li>Cottage</li> 
</ul> 

Ma liste dynamique qui est créée:

<ul class="addedItems">  
    <li>Month</li> 
    <li>Year</li> 
    <li>Cottage</li> 
    <li><span class="edit">edit</span></li> 
    <li><span class="del">delete</span></li> 
</ul> 


This all looks like this: 

Month  Year  Cottage <--this appears after I've added an entry 
--------------------------------  and I want it to stick around unless 
             all items are deleted. 


Dec   1990  Fir  edit/delete <--entries 
Jan   2000  Willow  edit/delete 

Ma question est: Y at-il une sorte de sous condition que je peux utiliser avec jQuery pour cacher la class="header" si tous les éléments sont supprimés? J'ai lu des instructions conditionnelles comme is et not avec jq mais je ne comprends pas vraiment comment ils fonctionnent. Tous les éléments de class="addedItems" sont stockés dans data produit par JSON.

Ceci est la fonction de suppression:

$(".del").live("click", function(){ 
     var del = this; 
     var thisVal = $(del).val(); 
     $.post("delete.php", { dirID : thisVal }, 
     function(data){ 
     if(confirm("Are you sure you want to DELETE this entry?") == true) { 
      if(data.success) { 
      //hide the class="header" here somwhere?? 
      $(del).parents(".addedItems").hide(); 
      } else if(data.error) { 
      // throw error if item does not delete 
      } 
     } 
     }, "json"); 
     return false; 
    }); //end of .del function 

Voici le delete.php

<?php 

    if($_POST) { 


     $data['delID'] = $_POST['dirID']; 

     $query = "DELETE from //tablename WHERE dirID = '{$data['delID']}' LIMIT 1"; 

     $result = $db->query($query); 

     if($result) { 
     $data['success'] = true; 
     $data['message'] = "Entry was successfully removed."; 
     } else { 
     $data['error'] = true; 
     $data['message'] = "Item could not be deleted."; 
     } 

     echo json_encode($data); 
    } 

    ?> 

Answer 1

Je suppose que vous avez besoin d'une chaque fonction:

$(del).parents('.header').each(function(){ 
    if ($(this).children('.addedItems:visible').length == 0) 
    { 
    $(this).hide(); 
    } 
}); 

Dès appelé ce petit script cachera tout UL de .header sans enfants.

lieu ce script après votre $(del).parents(".addedItems").hide();

Answer 2

essayez ceci:

if(confirm("Are you sure you want to DELETE this entry?") == true) { 
    if(data.success) { 
     //hide the class="header" here somwhere?? 
     $(del).parents(".addedItems").hide(); 

     //CHECK IF THERE ARE NOT ANY LI ITEMS IN UL 
     if($("ul.addedItems li").length==0){ 
      $("ul.header").hide();//HIDE HEADER LIST 
     } 

    } else if(data.error) { 
     // throw error if item does not delete 
    } 
} 

Answer 3

Sur la base de quelques-unes des réponses ici, voici ce que je suis venu avec:

if($("ul.header").siblings("ul.addedItems").is(":visible")) { 
    } else { 
     $("ul.header").hide(); 
    } 

Merci à tous pour la perspicacité.