change html object inside cloned object

Question

supose i have tr like this :

<tr id="file" >
            <td width="510"><div align="right"><span class="star"> *</span>
                <input type="text" name="title" style="width:500px;direction:ltr"  />
            </div></td>
            <td width="156" nowrap="nowrap"><div align="right">file </div></td>
          </tr>

and i have to link at bottom of page that let me do some action my js code is :

$(function(){

        $(".add").click(function(e){
            e.preventDefault();
            var copy =$('#file').clone().removeAttr('id').insertBefore($('.submit')) ;


            console.log('add called') ;
        });

        $('.remove').click(function(e){
            e.preventDefault();
            console.log('remove called ');
        });     


    }) ;

if the user first input some text in first input i have the same text in copy , i want to clear input after i create copy . tanks

Answer 1

You can use .find() and .val('') in the chain to clear the value, like this:

$('#file').clone().removeAttr('id').insertBefore('.submit')
                  .find('input').val('');

This searches inside the cloned element to clear the <input> it finds. If you need to be more specific later, you can use .find('input[name=title]'). If you need that copy reference, just add a .end() after the .val('') call so you're referencing the <tr> and not the <input> with it.