title: jQuery detach() v/s remove() v/s hide()
body: <p>I am using highcharts in my page. It's sort of heavy. </p>
  
  <p>When user clicks on a button, it loads the highcharts dynamically and when user clicks on <code>close</code> button, it removes/hides the chart.</p>
  
  <p>I want to know which one would be a better option.</p>
  
  <ol>
  <li><p>Hiding the chart when user clicks ? Will it slow down the rest of the page (as heavy javascript along with handlers is present ?) or,</p></li>
  <li><p><code>remove()</code> it, so that it makes the page lighter (But here, when user clicks on button again, I need to load the charts again) or,</p></li>
  <li><p>Use <code>detach()</code> , so that on reloading the highcharts, it works faster
  than <code>remove()</code> (but wont it make the page heavier as jQuery
  handlers are present all the time ?)</p></li>
  </ol>
  
  <p>I know from the jQuery docs,</p>
  
  <p><a href="http://api.jquery.com/remove/">.remove()</a> </p>
  
  <blockquote>
    <p>the .remove() method takes elements out of the DOM. Use .remove() when
    you want to remove the element itself, as well as everything inside
    it. In addition to the elements themselves, all bound events and
    jQuery data associated with the elements are removed.</p>
  </blockquote>
  
  <p><a href="http://api.jquery.com/detach/">.detach()</a> </p>
  
  <blockquote>
    <p>The .detach() method is the same as .remove(), except that .detach()
    keeps all jQuery data associated with the removed elements. This
    method is useful when removed elements are to be reinserted into the
    DOM at a later time.</p>
  </blockquote>
  
  <p><a href="http://api.jquery.com/hide/">.hide()</a></p>
  
  <blockquote>
    <p>The matched elements will be hidden immediately, with no animation.
    This is roughly equivalent to calling .css('display', 'none')</p>
  </blockquote>