How can I clear content without getting the dreaded “stop running this script?” dialog?

Question

In Windows Forms there\'s a BeginUpdate/EndUpdate pair on some controls. I want something like that, but for jQuery.

---

I have a div, that holds a div. like this: <

Answer 1

I'm pretty sure the "why" will be revealed here (sourced from jQuery 1.4.2):

empty: function() {
  for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
    // Remove element nodes and prevent memory leaks
    if ( elem.nodeType === 1 ) {
      jQuery.cleanData( elem.getElementsByTagName("*") );
    }

    // Remove any remaining nodes
    while ( elem.firstChild ) {
      elem.removeChild( elem.firstChild );
    }
  }

  return this;
},

cleanData: function( elems ) {
  var data, id, cache = jQuery.cache,
      special = jQuery.event.special,
      deleteExpando = jQuery.support.deleteExpando;

  for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
    if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) {
      continue;
    }

    id = elem[ jQuery.expando ];

    if ( id ) {
      data = cache[ id ];

      if ( data && data.events ) {
        for ( var type in data.events ) {
          if ( special[ type ] ) {
            jQuery.event.remove( elem, type );
          } else {
            removeEvent( elem, type, data.handle );
          }
        }
      }

      if ( deleteExpando ) {
        delete elem[ jQuery.expando ];
      } else if ( elem.removeAttribute ) {
        elem.removeAttribute( jQuery.expando );
      }

      delete cache[ id ];
    }
  }
}

Notice that the empty() function (and anything else that removes the DOM element) will call cleanData() which scans each contained node to remove the expando property and unbind the events that were bound, remove all the data that was in the internal cache, and what not.

You could perhaps solve this problem by splitting up the work a little. I'm not sure how many children you have in that element but you could try something like this:

$('#report').children().each(function() {
  var $this = $(this); 
  setTimeout(function() { $this.remove(); }, 0);
});

Say there are 10 direct children of #report this will split the removing operation into 10 separate event loops, which might get around your long processing delay issue.

Answer 2

You should try bypassing jQuery and empty out the content yourself after destroying the accordion:

$('#report')[0].innerHTML = '';

This will be much faster, but may cause IE to leak memory (jQuery goes to great pains to try to ensure that there are no references that prevent IE from doing garbage collection, which is part of why it is so slow to remove data).