title: Removing and Appending in the DOM
body: <p>I've been at this problem for a while now, and I can't seem to figure it out. I have a checkbox that when checked, deletes a div containing a textbox. When that checkbox is unchecked the aforementioned textbox should return to the page. The removal works, but the append doesn't. </p>
  
  <p>This is what I'm currently working with code wise:</p>
  
  <pre><code>$('#ResultsNoData1').click(function () {
      var parent = document.getElementById('Results1').parentNode;
      var child = document.getElementById('Results1');
  
      if (this.checked) {
          parent.removeChild(child);
      }
      else {
          parent.appendChild(child);
      }
  });
  </code></pre>
  
  <p>My original design worked by doing the following:</p>
  
  <pre><code>$('#ResultsNoData1').click(function () {
      (this.checked) ? $('.results1').hide() : $('.results1').show();
  });
  </code></pre>
  
  <p>However the functionality I need to recreate is actually removing the data from this textbox from being accessed on the site while hiding the textbox itself at the same time. This doesn't provide that functionality.</p>
  
  <p><a href="http://jsfiddle.net/cx96g/1/" rel="nofollow">Current example</a></p>