Как сделать так, чтобы в input type=file при нажатии кнопки удалить, удалялся не только файл, но и фейковое имя файла?

Question

[IsayR]

Помогите, пожалуйста. Когда загружаю файл в input type=file, у меня появляется название файла, а когда удаляю файл, название остается таким же. Подскажите, пожалуйста

<div class="file">
	<div class="file__options d-flex justify-content-between">
		<a href="#" class="name-file"></a>
		<a class="file__delite" id="delete">
			Удалить фото 
		</a>	
	</div>
	<div class="file__item">
		<input id="nameFile" accept=".jpg, .png, .gif" type="file" name="image" class="file__input">
		<button class="file__btn">Загрузить фото товара</button>
      </div>
</div>

$(document).ready(function() {
            $('input[type="file"]').change(function(e) {
                var nameFile = e.target.files[0].name;
                $(".name-file").text(nameFile);
 
            });

             $('body').on('click','#delete',function() { 
                alert('Вы действительно хотите удалить файл?');
                $("#nameFile")[0].value = "";
            });

        });

.file__options {
  display: flex;
}

.file__item {
  position: relative;
}

.name-file {
  font-size: 15px;
  margin-bottom: 13px;
}

.file__delite {
  font-size: 13px;
  color: #E53535;
  border-bottom: 1px solid #E53535;
  display: inline;
  margin-bottom: 14px;
}

.file__delite:hover {
  color: #c82e2e;
  border-bottom: 1px solid  #c82e2e;
}

.file__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 0;
  cursor: pointer ;
}

.file__btn  {
  border: 1px dashed rgba(255, 255, 255, 0.26);
  padding: 12px 183px;
  display: inline-flex;
  border-radius: 10px;
  color: #fff;
  background: #363A4D;
  height: 43px;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 400;
}

Спасибо Большое)