title: Jquery .clone() method. Removing clones
body: <p>I noticed some interesting behavior when dealing with the .clone() function.</p>
  
  <p>If I have a function to create rows and columns dynamically like this:</p>
  
  <pre><code>function appendDiv(n) {
      for (var i=0;i&lt;n;i++) {
          $rows.append($columns.clone()); //assume I put $('.rows') &amp; others in a var
      }
      for (var i=0;i&lt;n;i++) {
          $wrapper.append($rows.clone());
      }
  }
  </code></pre>
  
  <p>And I then delete the elements from the DOM maybe like this:</p>
  
  <pre><code>    function deleteClones() {
      $wrapper.off();
      $wrapper.html('');
      $('body').append($wrapper);
      num = prompt("Enter another number.");
      return num;
  }
  </code></pre>
  
  <p>So I'd be calling the functions in an order like this: </p>
  
  <pre><code>appendDiv(num);
  num = deleteClones();
  appendDiv(num);
  </code></pre>
  
  <p>Can someone tell me why when I call <code>appendDiv(num);</code> again after removing those elements, the old columns are added along with the new ones? Here is a preschool level demonstration of what I mean: <a href="http://jsfiddle.net/wj6sgeeu/" rel="nofollow">http://jsfiddle.net/wj6sgeeu/</a>. Notice upon inspecting the html document, the clones that were created before we called <code>deleteClones()</code> are added again when we call <code>appendDiv(num)</code> for the second time.</p>
  
  <p>I'm new to jquery, so maybe this is a self evident and obvious fact (maybe using a different method to remove clones?) but does someone have an explanation for this behavior?</p>
  
  <p>Thank you!</p>