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.

<form name=frmAJAX method=post action=Default.aspx?id=123456 id=frmAJAX>

<div>

<input type=hidden name=__VIEWSTATE id=__VIEWSTATE />

</div>

<div>

<input type=hidden name=__EVENTVALIDATION id=__EVENTVALIDATION />

</div>

<div id=inner>

<!-- valid info here --!>

</div>

</form>

Next I take the above and innerHTML it to a new DOM element like so:

   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);

but after the above, I use some jQuery to remove the nasty aspnet junk

$('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);

My question is this - When using IESieve I notice no actual leaks but an ever growing number of DOM elements (thus memory usage).

What can I improve on in the client-side to actually cleanup this mess? Note- both IE7/8 show these results.

EDIT: I did finally get this working and decided to write a short blog post with complete source code.