jQuery hide ul header when all entries are deleted...

Question

I'm a noob with jQuery...and I hope I've explained this well enough; I have a <ul> header that appears when I've added an entry to a dynamically created list using $.post. Each entry added has a delete/edit button associated with it.

Header is this:

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

My dynamic list that is created:

<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

My question is: Is there some kind of conditional that I can use with jQuery to hide the class="header" if all the items are deleted? I've read up on conditional statements like is and not with jq but I'm not really understanding how they work. All of the items in class="addedItems" is stored in data produced by JSON.

This is the delete function:

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

Here is the 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

I guess you need an each-function :

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

As soon as called this tiny script will hide any UL of .header without any children.

place this script after your $(del).parents(".addedItems").hide();

Answer 2

try this:

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

Based on some of the answers here, this is what I came up with:

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

Thanks to everyone for the insight.