How to clear files from <input type='file' /> using jQuery or JavaScript

Question

There are several <input type='file' /> fields in my file and there are no any html forms. I want to clear attached files from particular <input type='file' />. Not from the all fields. I have use $('input').val(""); but it clears all the <input type='file' /> fields. So how I clear the attached files from particular <input type='file' /> field?

var control = $("#mcontrol");

$("#clear").on("click", function() {
  $('input').val("");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="mcontrol" /><br>
<input type="file" id="mcontrol2" />
<button id="clear">Clear</button>

Here is the fiddle

Answer 1

Using JavaScript you can do that as follows.

document.getElementById("#control").value = "";

Answer 2

You can use the id you already have set:

var control = $("#mcontrol");
$("#clear").on("click", function() {
  control.val("");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="mcontrol" />
<br>
<input type="file" id="mcontrol2" />
<button id="clear">Clear</button>

Answer 3

// For first file feild 
$("#clear").on("click", function () {

    $('#mcontrol1').val("");
});

// For second file feild 
$("#clear").on("click", function () {

    $('#mcontrol2').val("");
});