empty() NOT WORKING as expected... (please read on)

empty() NOT WORKING as expected... (please read on)

OK, here's the problem.

From inside a DIV I call a jquery function that, using ajax, replaces the content of that DIV with new content.

The problem is that, for PHP/HTML reasons, the new content includes the <div> element.

What happens is that the second time the event is triggered, it is triggered twice because there are now two divs identical one inside the other.

I had solved this using empty(). But after I added some css istructions to prevent the collapsing of the div, the empty() stopped working.

Note that this code is for a (popular ) wordpress plugin. If you want to see it in action, download it from here(old version on the wordpress repository does not have this problem)

here is the code, sampled and simplified (I know, I really suck at jQuery, all the transitions are wrong...)


function functionName(some, variables, id)
{
   
   jQuery(document).ready
   (
      
      function($)
      {
         var divheight = $("div.class-name-" + id).height();

         $("div.class-name-" + id).fadeOut('slow');

         $("div.class-name-" + id).height(divheight/2);
         $("div.class-name-" + id).css('text-align','center');
         $("div.class-name-" + id).css('padding-top',divheight/2);
         $("div.class-name-" + id).empty();

         $("div.class-name-" + id).html(loading).fadeIn('slow', function () {
                                                                                 
            $.ajax({
                  type:   "POST",
                  url:   url + "someurl.php",
                  data:   "action=someaction&variables=" + variables,
                  success: function(html)
                  {   
                     $("div.class-name-" + id).css('text-align',null);
                     $("div.class-name-" + id).css('padding-top',null);

                     $("div.class-name-" + id).empty();
                     
                     if ($("div.class-name-" + id).parent().is("div.class-name-" + id)==false) {
                        $("div.class-name-" + id).html(html);
                     }
                  }
            });
            
        });
         
      }
   )
}


As i said, using empty(), plus the last condition before replacing the html was enough to get rid of a double div, until I added the css values to prevent the collapsing of the area.

Maybe i should use a id instead of the class? Where should I use the empty() to make it work?

Thanks for any idea you might have....