title: Hide vs Remove DOM elements
body: <h2>Hide vs Remove</h2>
  
  <p>What is the best way to handle DOM elements, hide or delete?. assume that the environment can change several times. Elements can have click-callbacks or other event callback.</p>
  
  <p><strong>Hide</strong></p>
  
  <p>When hide what is best?. If clicking a button hide multiple items, you can hide one by one or you can also create css rules to do so.</p>
  
  <p><em>Option 1:</em></p>
  
  <pre><code>&lt;style&gt;
  .superContent{/*...*/}
  
  .superContent.noEdit .occultable{
      display:none;
  }
  &lt;/style&gt;
  
  &lt;form class=”superContent” action=”...”&gt;
      &lt;label&gt;Name&lt;/label&gt;
      &lt;input type=”text” /&gt;
      &lt;input type=”submit” class=”occultable” value=”send”/&gt;
  &lt;/form&gt;
  
  &lt;button id=”hideAll”&gt;Edit&lt;/button&gt;
  &lt;script type=”text/javascript”&gt;
      $(“#hideAll”).click(function(){
          $(“.superContent”).toggleClass(“noEdit”);
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/p8mU8/" rel="noreferrer">http://jsfiddle.net/p8mU8/</a></p>
  
  <p>The other option is to just hide the desired items (these may be few or many):</p>
  
  <p><em>Option 2:</em></p>
  
  <pre><code>&lt;script type=”text/javascript”&gt;
      $(“#hideAll”).click(function(){
          $(“.occultable”).toggle();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/JAmF9/" rel="noreferrer">http://jsfiddle.net/JAmF9/</a></p>
  
  <hr>
  
  <p><strong>Remove</strong></p>
  
  <p>To modify the DOM you can also delete unwanted items and re-insert them later.</p>
  
  <p><em>Option 3:</em></p>
  
  <pre><code>&lt;form class="superContent"&gt;
      &lt;label&gt;Name&lt;/label&gt;
      &lt;input type="text" /&gt;
      &lt;input id="sendbutton" type="submit" class="occultable" value="send"/&gt;
  &lt;/form&gt;
  
  &lt;button id="hideAll"&gt;Edit&lt;/button&gt;​
  
  &lt;script type=”text/javascript”&gt;
  $("#hideAll").click(function(){
      if( $(".superContent").find("#sendbutton").length&gt;0 ){
          $(".superContent").find("#sendbutton").remove();
      }
      else{
          $(".superContent").append('&lt;input id="sendbutton" type="submit" class="occultable" value="send"/&gt;');
      }
  });​
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Yj5Aw/" rel="noreferrer">http://jsfiddle.net/Yj5Aw/</a></p>
  
  <p>These are just small examples. Assuming a UI that contains a large number of elements. What do you think the best option?. Which has less memory leak and more performance?</p>
  
  <p>There are some javascript frameworks like kendo-ui that removes elements.
  jQueryUI prefers to hide items, but the widget Tab sortable creates the tab temporarily dragged by the user.</p>