Databases
StackOverflow2013
Postsdbo
POHow to dispose of DOM elements in JavaScript to avoid memory leaks
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to dispose of DOM elements in JavaScript to avoid memory leaks
    text
    copied!<p>I have an application that allows a user to view details on a specific case w/out a postback. Each time a user requests data from the server I pull down the following markup.</p> <pre><code>&lt;form name="frmAJAX" method="post" action="Default.aspx?id=123456" id="frmAJAX"&gt; &lt;div&gt; &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" /&gt; &lt;/div&gt; &lt;div&gt; &lt;input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" /&gt; &lt;/div&gt; &lt;div id="inner"&gt; &lt;!-- valid info here --!&gt; &lt;/div&gt; &lt;/form&gt; </code></pre> <p>Next I take the above and innerHTML it to a new DOM element like so:</p> <pre><code> success: function(xhtml) { var tr = document.createElement('tr'); var td = document.createElement('td'); var container = document.createElement('div'); obj.parentNode.parentNode.parentNode.insertBefore(tr, obj.parentNode.parentNode.nextSibling); td.appendChild(container); container.innerHTML = xhtml; tr.appendChild(td); </code></pre> <p>but after the above, I use some jQuery to remove the nasty aspnet junk </p> <pre><code>$('form:eq(1)').children().each( function() { if ($('form:eq(1)').find('div').filter(function() { return $(this).attr('id') == ''; }).remove()); } ); //Capture the remaining children var children = $('form:eq(1)').children(); // Remove the form $('form:eq(1)').remove(); // append the correct child element back to the DOM parentObj.append(children); </code></pre> <p>My question is this - When using <a href="http://home.orange.nl/jsrosman/" rel="nofollow noreferrer">IESieve</a> I notice no actual leaks but an ever growing number of DOM elements (thus memory usage).</p> <p>What can I improve on in the client-side to actually cleanup this mess? Note- both IE7/8 show these results.</p> <p><strong>EDIT</strong>: I did finally get this working and decided to write a short <a href="http://toranbillups.com/blog/archive/2009/04/21/Cleanup-for-dynamically-generated-DOM-elements-in-IE/" rel="nofollow noreferrer">blog post</a> with complete source code.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload