I am facing a challenge with a parent div that contains approximately 300 child divs, each one containing an image and some text. I have an array with the necessary information to reorder these divs using references.
However, whenever I loop through the array to reorder and move the elements accordingly, I notice severe memory leaks of up to an additional 100MB every time I sort them!
I have attempted a few different approaches but have not found success yet.
$.each(gameArray , function($idx, $itm) {
$("#elementid"+ $itm.split('|#|')[0] ).appendTo($("#parent"));
});
Another approach:
$.each(gameArray , function($idx, $itm) {
var element = $("#elementid"+ $itm.split('|#|')[0] ).detach();
element.appendTo($("#parent"));
element = null;
});
And another attempt:
$.each(gameArray , function($idx, $itm) {
var element = $("#elementid"+ $itm.split('|#|')[0] ).clone(true).remove();
element.appendTo($("#parent"));
element = null;
});
I have read that detaching the element keeps it in the DOM so there is no need to recreate it when putting it back into the page, thus preventing an increase in memory. However, this does not seem to be working as expected.
Is there something I might be missing? There has to be a way to sort these elements without causing such a significant increase in memory usage.
All the examples I have come across involve ordered lists with only about 10 list elements, making it hard to notice any memory increase.