2

I have a button click event that grabs names associated with checkboxes that are checked and adds them to a <ul> with checkboxes on the right side of the page. This works fine I then have another button that will remove and <li>'s with checked checkboxes from the <ul>. This works to. The problem comes when you go to add back an item that has been deleted from the right side. The item is not on the page, so it obviously removed from the DOM, but it's as if it's stored in browser memory still. How do I go about clearing it out of memory? Code is below.

$('.add-people').click(function () {
   $('.add-names:checked').each(function () {
      var name = $(this).parent().siblings('td.name-cell').html();
      if ($('ul.group-list').find(':contains(' + name + ')').length) {
         //Name is already in list
      } else {
         var newLi = '<li><input id="name" class="remove-names" type="checkbox" name="' + name + '"><span>' + name + '</span></li>'
         $('ul.group-list').append(newLi);                        
      }
   });
});

$('.remove-people').click(function () {
    $('.remove-names:checked').each(function () {
        $(this).parent().remove();
    });
});
Ricardo Souza
  • 16,030
  • 6
  • 37
  • 69
stackDat
  • 101
  • 7

1 Answers1

5

Once a DOM element is removed from the DOM, it is only kept alive if there is javascript code that has a reference to the DOM element. If there are no javascript references to the DOM element itself, then it will be garbage collected by the browser during the next garbage collection sweep.

A reference in javascript means a javascript variable, array, property, etc... that holds the DOM node. In your code above, I don't see any such variables that are lasting so I don't see any reason why the DOM node would not be garbage collected from this particular piece of code.

Why do you think it's being stored in browser memory?

To make sure a DOM element is cleared from memory, you do two things:

  1. Remove it from the DOM.
  2. Make sure no javascript variables hold a reference to it by setting them to null or any other value or making sure they go out of scope so the variables themselves are destroyed (thus releasing their references too).

That's it, there is nothing else.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Thanks but that really doesn't help me with the problem here. – stackDat Jul 20 '12 at 01:51
  • @stackDat - then WHAT is your problem here? I thought I answered your question about when DOM elements are cleaned up. What actual problem do you have (please be specific)? – jfriend00 Jul 20 '12 at 01:51
  • 1
    @stackDat it does, you can read this http://stackoverflow.com/questions/864516/what-is-javascript-garbage-collection – Ram Jul 20 '12 at 01:53
  • @stackDat - I added a little more clarification to my answer. – jfriend00 Jul 20 '12 at 01:54
  • I assumed it was in memory because I can't add a specific item again on a second pass and it seems that others are having the issue with jQuery remove(), http://stackoverflow.com/questions/8009269/jquery-remove-detach-dom-elements-but-i-still-can-access-the-elements-from-c for example. I have tried setting newLi = null; and setting other parts to variables that can be set to null afterwards but nothing seems to help. I guess I was hoping to get some tips on what needs to be altered in the above syntax. Thank you for your help. – stackDat Jul 20 '12 at 03:07
  • @stackDat - I think you're assumption is wrong that the issue has anything to do with memory. There's likely something else wrong with your code/HTML. Show us the HTML that goes with this code so we can evaluate the whole thing, please. Even better, put it all in a working jsFiddle so we can actually debug. – jfriend00 Jul 20 '12 at 04:10
  • @jfriend00 - Wow, I'm at a loss now. The guts of it works completely fine in jsFiddle, so there's definitely something else weird going on. I'll have to dig deeper at work tomorrow. Thanks again for your time and patience, at least I know it actually works as I intended it to. – stackDat Jul 20 '12 at 05:11