I'm removing an element with jQuery remove(), then add it in HTML, then check if it exists - it doesn't (length shows 0). What's going on here? Do elements exist "at the same time", although I create them serial?

 

Background:

I'm using ajax to update a part of the page. At the same time I have a dialog on the page that I want to update, too. The dialog shows debugging information from the server-side and should be from the same request processing. So, I cannot make a second Ajax call to fill just the dialog. I have to use the data from one call.

 

What I do is send the HTML data for the replacement area (an editing area) and then add the HTML for the dialog to it. It's enclosed in a span wrapper (#debugBoxRefresh) with display:none and the content (#debugBox) is used for the replacement action. Then I insert the html within the wrapper (#debugBox) in the dialog (thus refreshing the dialog with the new data) and remove the original data from the wrapper. There are other occasions where I don't replace that editing area but just use the HTML/script sent to update a few values on the page and refresh the dialog box directly (in this case I insert the sent data directly in the dialog).

I found that sometimes I seem to end up with more than one element named #debugBox and so the inserting in the dialog doesn't refresh the content because it's actually inserting the "first" (old) occurence of it. That's why I added the removal of the element in the wrapper and then also added a "look-ahead" removal before it.

However, as it turns out, this removal before insertion seems to stop the insertion or removes it right at insertion time, so it's not available for inserting in the dialog.

 

What is causing this or is there a better method to achieve what I want?

 

Here's a condensed version of the code used.

<here's the html/script for the replacement area that is directly shown in that area>

<span id="debugBoxRefreshWrapper" style="display:none">

<script>
$('#debugBoxRefreshWrapper #debugBoxRefresh').remove();
</script>

<span id="debugBoxRefresh">the new debugging data</span>

<script>

$('#debugBox').dialog('option', 'title', "title: new title"); //this always works!

$('#debugBox').html($('#debugBoxRefresh').html()); //see below for detail

$('#debugBoxRefreshWrapper #debugBoxRefresh').remove();

</script>

 

If I remove the first remove() line then it works when not directly replacing the dialog with "data", but then sometimes the direct replacement of the dialog doesn't work because I have more than one element with that id on the page.

 

I hope this is enough to unterstand and solve the problem.

 

Addition.

I added a

$('#debugBoxRefreshWrapper').remove();

to the end of the script and removed the first removal line.

It then seems to work for both cases. And I see the same phenomenon concerning the "time order". An earlier alert shows 0 for length if I remove #debugBoxRefreshWrapper after the alert.

However, I also noticed that the script is carried out multiple times. I had noticed this earlier already and postponed the problem. But after reading a parallel post on the same topic ( http://forum.jquery.com/topic/jquery-load-loading-a-javascript-in-to-div-calls-a-function-multiple-times) I checked again and see that it is indeed carried out multiple times. Even if I remove the wrapper that also contained the script code in the first place. Is there no way to "remove" the script other than to prevent it's running as per the forum post referenced above?