title: jquery append element and keep reference for removing it later
body: <p>what is the correct method to append a div to dom, and keep a handle for manipulating that dom later ? and case removing it will the refrence be deleted also ? if not how can i ?</p>
  
  <p>this is an example code of what i came out with, please let me know your opinon and if there is a better more solid method for doing this.</p>
  
  <p>note that i keep reference in an array because many elements can manipulate element.</p>
  
  <pre><code>var layovers=[];
  
  function ajaxMe($e){
  //do some ajax call
  var lay=layoverThis($e);
  
  layovers[lay].remove(); //does this remove added element from dom ? does it unset layouvers[lay] too ?
  }
  
  function layoverThis($e){
          var p=layover.push($('&lt;div class="overlay" &gt;&lt;span&gt;&lt;i class="fa fa-spinner fa-spin"/&gt;loading&lt;/span&gt;&lt;/div&gt;')) - 1;
          $e.append(layover[p]);
          return p;
      }
  </code></pre>
  
  <p>nearest example i can think of is like opening a folder in windows Os.</p>
  
  <p>when you open a folder: a new window opens to your desktop, while also there is a taskbar tab that is added linked to same window that was appended to your desktop, allowing system to manipulate window (close-restore minimize etc..), so how do i do this in javasript.</p>
  
  <p>my question is how to make such behavior in a manner that is flexible and not hacky or memory wasteful.</p>