How to clear or empty input:file when cloned?

Question

How could I clear or empty the input type file after I clone the source for it has already a file selected before. I already applied this approach Clearing <input type='file' /> using jQuery seems not working on my set up.

By the way the code is wrap with form element.

== source ==

var source = $( '#table-wrapper' ),
        clone = source.clone( true ),
        count = clone.length;

<div id="table-wrapper">
   <table>
     <tr>
       <td></td>
     </tr>
   </table>
   <p class="pdf-add-row"><input id="pdf" type="file"/></p>
</div>

== clone ==

<div id="table-wrapper-1">
   <table>
     <tr>
       <td></td>
     </tr>
   </table>
   <p class="pdf-add-row"><input id="pdf-1" type="file"/></p>
</div>

The file removed by me when i click the clone button. (Chrome) But not on firefox i see — Andreas Furster, Oct 29 '14 at 11:30
Thanks @ArunPJohny, but on my set up it doesn't work. After I clone the source, id's will only have a '-1' format to separate from the source which the structure is pretty the same as the source. — heero, Oct 29 '14 at 11:39

score 2 · Accepted Answer · answered Oct 29 '14 at 11:34

2

Try this code:

$('button').click(function () {
    var source = $( '#table-wrapper' ),
        clone = source.clone( true ),
        count = clone.length;

    clone.find('input').val('');

    clone.appendTo('#result')
})

answered Oct 29 '14 at 11:34

Andreas Furster

1,558
1
12
28

You can actually chain it like this: source.clone( true ).find('input').val('') – jay temp Oct 29 '14 at 11:36
1

@jaytemp no... then `clone` will refer to the `input` element not the cloned container – Arun P Johny Oct 29 '14 at 11:37
You could chain it like this: `source.clone(true).find('input').val('').end()`. But i don't like it. We can chain almost anything. – Andreas Furster Oct 29 '14 at 11:43

score 1 · Answer 2 · answered Oct 29 '14 at 11:31

1

Do this..

clone = source.clone( true ).find('input').val('')

answered Oct 29 '14 at 11:31

jay temp

1,207
12
11

score 0 · Answer 3 · answered Oct 29 '14 at 11:34

You can try something like

$('button').click(function() {
  var source = $('#table-wrapper'),
    clone = source.clone(true),
    count = clone.length;

  //append the clone to a temp form so that it can be restted
  $('<form />').append(clone)[0].reset();

  clone.appendTo('#result')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="table-wrapper">
  <table>
    <tr>
      <td></td>
    </tr>
  </table>
  <p class="pdf-add-row">
    <input id="pdf-1" type="file" />
  </p>
</div>
<button>Clone</button>
<div id="result"></div>

Demo: Fiddle

How to clear or empty input:file when cloned?

3 Answers3