Clear field file when you no longer have images

Question

I have the following stylized field that uploads multiple images:

As a result, it shows as follows:

So far so good, but I would like to delete all images, also clear the field file. See the code below:

<label for='files' class="upload">Selecionar arquivos <i class="fa fa-plus-circle fa-lg" aria-hidden="true"></i></label>
<input id='files' type='file' name="Fotos[]" multiple>
<output id="list"></output>

<script>
var count=0;
function handleFileSelect(evt) {
        var $fileUpload = $("input#files[type='file']");
        count=count+parseInt($fileUpload.get(0).files.length);

        if (parseInt($fileUpload.get(0).files.length) > 5 || count > 4) {
            alert("O máximo é de até 4 fotos");
            count=count-parseInt($fileUpload.get(0).files.length);
            evt.preventDefault();
            evt.stopPropagation();
            return false;
        }
        var files = evt.target.files;
        for (var i = 0, f; f = files[i]; i++) {
               if (!f.type.match('image.*')) {
                     continue;
               }
            var reader = new FileReader();
            reader.onload = (function (theFile) {
                return function (e) {
                    var span = document.createElement('span');
                    span.innerHTML = ['<input type="radio" name="Principal[]" id="principal" value="S"><img class="img-thumbnail" src="', e.target.result, '" title="', escape(theFile.name), '" style="width: 30%"/><span class="remove_img_preview"></span>'].join('');
                    document.getElementById('list').insertBefore(span, null);
                };
            })(f);
            reader.readAsDataURL(f);
        }
    }
    $('#files').change(function(evt){
        handleFileSelect(evt);
    });
    $('#list').on('click', '.remove_img_preview',function () {
        $(this).parent('span').remove();
      count--;
    });
</script>

Answer 1

Just pass an empty value that solves $('#files').val(null);

var count=0;
function handleFileSelect(evt) {
        var $fileUpload = $("input#files[type='file']");
        count=count+parseInt($fileUpload.get(0).files.length);

        if (parseInt($fileUpload.get(0).files.length) > 5 || count > 4) {
            alert("O máximo é de até 4 fotos");
            count=count-parseInt($fileUpload.get(0).files.length);
            evt.preventDefault();
            evt.stopPropagation();
            return false;
        }
        var files = evt.target.files;
        for (var i = 0, f; f = files[i]; i++) {
               if (!f.type.match('image.*')) {
                     continue;
               }
            var reader = new FileReader();
            reader.onload = (function (theFile) {
                return function (e) {
                    var span = document.createElement('span');
                    span.innerHTML = ['<input type="radio" name="Principal[]" id="principal" value="S"><img class="img-thumbnail" src="', e.target.result, '" title="', escape(theFile.name), '" style="width: 30%"/><span class="remove_img_preview">APAGAR</span>'].join('');
                    document.getElementById('list').insertBefore(span, null);
                };
            })(f);
            reader.readAsDataURL(f);
        }
    }
    $('#files').change(function(evt){
        handleFileSelect(evt);
    });
    $('#list').on('click', '.remove_img_preview',function () {
        $(this).parent('span').remove();
      count--;
      
      //So passar um valor vazio que resolve
      if(count==0){
        $('#files').val(null);
      }
      
    });
    
    //Aqui vai limbar o input e a lista de imagens
    $('#clear').on('click', function(){
      $('#files').val(null);
      $('#list').html('');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for='files' class="upload">Selecionar arquivos <i class="fa fa-plus-circle fa-lg" aria-hidden="true"></i></label>
<input id='files' type='file' name="Fotos[]" multiple>

<br />
<button type="button" id="clear">Limpar</button>
<br />
<output id="list"></output>