A way to increase the speed of cleaning the contents of DOM elements

Question

there! In my AJAX app, I have a lot of content on the pages. Therefore, when the user changes the page, I have to clear the previous content in the page div. Using jQuery: cont.empty () or cont.html ('') clears the contents of the DOM elements and related data, events, etc. But due to the large content, page performance is drastically reduced. Sometimes it takes up to 500 ms to clear contents on a fast machine. I will learn how to quickly clear a super container using a pure JavaScript function:

function empty(element) {
    var i;
    for (i = element.childNodes.length - 1; i >= 0; i--)
    element.removeChild(element.childNodes[i]);
}

This approach, unfortunately, causes memory leaks because it does not clear the jQuery related items in the cache.

Can you give me an opinion or approach that will quickly clear the content and prevent a memory leak.

As an example, is there a way to quickly clear the content using the native function and at some point (interval function) iterate over $ .cache and delete the stored missing handlers? Something like a garbage collector.

Answer 1

You can use a filter when you define event handlers on the elements of your container. For example, you can use:

$(document).on("click", "#item1", function() {
    ...
});

instead:

$("#item1").on("click", function() {
    ...
});