jQuery clone() leaves user data in input field

Question

See jsfiddle: http://jsfiddle.net/bjCz3/

html

<table> <tr class="copyMe"> <td><input type="text" name="test" /></td> </tr> </table> <a id="clickMe" href="#">Click Me</a>

jquery

  $('#clickMe').click(function(event){
   event.preventDefault();

   var tr = $('.copyMe:last');
   var newTr = tr.clone();
   newTr.appendTo(tr.parent());
  }); 

If you type text in the input, and click the click me, the row (including the input) is cloned and inserted - and has the data you entered.

The API for clone() says:

The .clone() method performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes. For performance reasons, the dynamic state of form elements (e.g., user data typed into input, and textarea or user selections made to a select) is not copied to the cloned elements. The clone operation sets these fields to their default values as specified in the HTML.

http://api.jquery.com/clone/

So why does my input have the value filled in, and more important, how can I prevent it? I want them to be empty/default like the documentation implies. I tried specifying both arguments as false even though they default to that, and it still copies it.

Answer 1

If you are working with inputs that aren't checked or have values set on page load. ( or you want defaults that are set)...cache a row before user touches one . Then clone that stored row to append when needed

/* store row on page load*/
 var tr = $('.copyMe:last').clone();
 $('#clickMe').click(function(event){
   event.preventDefault();

  var newTr = tr.clone();....

})