Question

I have the following code to delete a dynamically generated ui-accordion. When the delete occurs (which works) I need to find out if the accordion container which is a div is empty. So if the user deletes the accordion and the container div is now empty I need to resize the containing div (the div is ui.layout pane which I need to resize automatically for the user when the conainter is empty).

When I delete the accorion the length is still 1. I need to resize when it is 0. Is this possible?

$( ".delete_accordion" )
        .click(function() {
            var parent = $(this).closest('h3');
            var head = parent.next('div');
            parent.add(head).fadeOut('slow',function(){$(this).remove();});    

            //length always returns 1 in the function even though it has been removed above.
            //perhaps there is an event or method I can intercept on delete?

            var parentHasClass = parent.hasClass("accordion");   

            var isempty = ($("#accordion").length == 0);
            alert(isempty);

            if(parentHasClass == "true"){                   
                if( isempty ){
                 myLayout.sizePane("west", 100);
                }                
            }

        });

Answer 1

The $(this).remove() is not called until after the fadeOut completes, so technically the length still does === 1.

You can fix this by putting the rest of your delete logic in the fadeOut callback:

  $( ".delete_accordion" )
          .click(function() {
              var parent = $(this).closest('h3');
              var head = parent.next('div');
              parent.add(head).fadeOut('slow',function(){
                $(this).remove();
                var parentHasClass = parent.hasClass("accordion");   

                var isempty = ($("#accordion").length == 0);
                alert(isempty);

                if(parentHasClass == "true"){                   
                    if( isempty ){
                     myLayout.sizePane("west", 100);
                    }                
                }
                });    

          });   

//I modified the selector as follows and now works great! Thanks Skylar!
$( ".delete_accordion" )
          .click(function() {
              var parent = $(this).closest('h3');
              var head = parent.next('div');
              parent.add(head).fadeOut('slow',function(){
                $(this).remove();
                var parentHasClass = parent.hasClass("accordion");  
                var isempty = ($("#accordion h3").length);
                if(isempty == 0 || parentHasClass == "true"){  
                     //alert(isempty);                 
                     myLayout.sizePane("west", 100);
                }
                });   

        });