See jsfiddle: /

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.

/

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.

See jsfiddle: http://jsfiddle/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./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.

• javascript
• jquery

Share Improve this question Follow edited Nov 5, 2013 at 21:35 Matteo Tassinari 18.6k88 gold badges6363 silver badges8484 bronze badges asked Nov 5, 2013 at 21:21 JessicaJessica 7,0052929 silver badges3939 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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();....

})

As far as a way to clear it yourself.

$('#clickMe').click(function(event){
  event.preventDefault();
  var tr = $('.copyMe:last');
  var newTr = tr.clone();
  newTr.find('input').val('');
  newTr.appendTo(tr.parent());
});   

Update

newTr.find("input[type=text], textarea").val("");
newTr.find('input:checkbox').removeAttr('checked');

http://jsfiddle/bjCz3/3/

Do it yourself after filling a bug report at jquery:

  $('#clickMe').click(function(event){
   event.preventDefault();
   var tr = $('.copyMe:last');
   var newTr = tr.clone();
   newTr.find(":input").val(''); //find all input types (input, textarea), empty it.
   newTr.appendTo(tr.parent());
  }); 

Updated working fiddle: http://jsfiddle/bjCz3/2/