Как вывести кнопку удаления файла в input file?

Question

[vladzvezdin]

Всем привет. Нужна помощь. Я стилизовал input file. При добавлении файла, вывожу его значение в отдельный инпут. Как сделать так чтобы, кнопка удаления файла появлялась только, когда я прикрепил файл. Сейчас кнопка видна постоянно

<div class="contract-upload">
                        <label>
                            <input type="file" name="contract-file" class="contract-file">
                            <span>Загрузить</span>
                        </label>
                    </div>
                    <div class="contract-result">
                        <div class="delete-file"><img src="img/icons/cross.svg" alt=""></div>
                        <input type="text" id="contract-filename" class="contract-filename" disabled>

                    </div>

$(".contract-upload .contract-file").change(function(){
    var filename = $(this).val().replace(/.*\\/, "");
    $("#contract-filename").val(filename);
  });

  $(".contract-result .delete-file").click(function () {
    $(".contract-file").val('');
    $("#contract-filename").val('');
  });

Answer 1

[Максим Тимофеев]

ну так у Вас есть событие change на инпуте уже, туда и добавьте появление

Comments

[vladzvezdin]

Блин, реально. Что-то я до такого просто решения не додумался))) спасибо

Answer 2

[Антон]

https://jsfiddle.net/6jgktfrm/

Скрытие кнопки и дублирование уж сами поправите, я думаю

Comments

[vladzvezdin]

Да, конечно. Спасибо