Problem with .remove()

Problem with .remove()

Hei jquery community,

I cannot handle the following problem: I created a div of class "bubble" using jquery. In this bubble, I appended the response of an ajax request, which consists basicly of links. By clicking on one of these links, an event is fired. This event is suposed to do two things: 1) remove the bubble: $( 'div.bubble' ).remove(); and 2) load anothed bit of data that is meant for further processing in the page. The second one works fine, but the first one doesn't.

Here some code snippets:

1) firing the event of creating the bubble by clicking a link / div:


  1. $functionMenuLeft->AddButton ( '#' , 'add.jpg' , 'onclick="javascript: fetchProperties( ' . $productID . ' , this );"' );

2) creating the bubble:
  1. function fetchProperties ( productID , parentObject ) {   
       
        $.ajax({                   
            url: 'scripts_php/loader/loadPropertyList.php?productID=' + productID,                
            success: function( data ) {   
                createBubble ( parentObject , data );     
            }       
        });   
                       
    }









and

  1. function createBubble ( parObject , bubbleContent , relHorizontalPosition2ParentObject , relVerticalPosition2ParentObject , widthOfBubble ) {   

        $( 'div.bubble' ).remove(); // this is to remove all other bubbles I might have loaded earlier
       
        if( relVerticalPosition2ParentObject === undefined ) relVerticalPosition2ParentObject = 70;
        if( widthOfBubble === undefined ) widthOfBubble = 600;
        if( relHorizontalPosition2ParentObject === undefined ) relHorizontalPosition2ParentObject = 0;
       
        var parObjectWidth = $( parObject ).width();
        var parObjectHeight = $( parObject ).height();
       
        var currentBubble = jQuery( '<div>' ).appendTo( parObject );
        currentBubble.addClass( "bubble" );
        currentBubble.css( 'top' , ( Math.round ( parObjectHeight * relVerticalPosition2ParentObject / 100 ) ) + 'px' );
        currentBubble.css( 'width' , widthOfBubble + 'px' );
       
        var currentBubbleTriangle = jQuery( '<div>' ).appendTo( currentBubble );
        currentBubbleTriangle.addClass( "bubbleForContentTriangle" );
        currentBubbleTriangle.css( 'left' , ( parObjectWidth / 2 - 8 ) + 'px' );
       
        var bubbleForContentList = jQuery( '<div>' ).appendTo( currentBubble );
        bubbleForContentList.addClass( "bubbleForContentList" );
        bubbleForContentList.css( 'left' , ( widthOfBubble * relHorizontalPosition2ParentObject / 100 ) + 'px' );

        bubbleForContentList.html ( bubbleContent );
                       
    }



























3) As I meantioned earlier, the bubble content is the ajax repsonse, consisting of links. These links fire another event:

  1. <?php
  2.      ...
               
        $propertyLinks .= '<a href="javascript:loadTrendForProdAndVariable ( ' . $productID . ' , ' . $propertyID . ' );">' . $propertyName . '</a>';   
            
        ...




  3.     echo $propertyLinks;
       
    ?>




4) the function


  1. function loadTrendForProdAndVariable( productID , propertyID ) {
           


  2.        //setTimeout( "$( 'div.bubble' ).remove()", 2);            // if i set this instead of (*), it works just fine
          //alert('immediatly before remove of bubble');            // if I set this before (*), it works just fine

  3.  
  4. $( 'div.bubble' ).remove();                                                //     (*)
  5.     
       
        $.ajax({            
            dataType: 'xml',
            url: 'scripts_php/loader/loadPropertyValuesOfProduct.php?productID=' + productID + '&propertyID=' + propertyID,
            success: function( data ) {   
           
                if ( $( data ).find( 'root' ).text() != '' ) {
                     ... // do something with the response
                }
               
               
                   
            }           
           
        });
       
    }


















The problem now is, that the bubble-div should vanish, but it vanishes and is created new after clicking this link.

This problem occurs with all browsers.

I checked for valid html / xml structure. I checked for algorithm. I checked what happens, i fI take not relevant commands out of the algorithms. None of this worked out. So I guess it's due to a lack of entirely understanding jqeury and ajax in correspondence.

Does anyone have a hint for me to solve this problem? That would really be prevent my hair from getting grey already today...

Greetings
Frank