input type file プレビュー画像のリセット

Question

こちらの私の質問の続きになります。
input type file 画像を1枚だけ表示

おかげさまで、
input fileをクリックすると、以下のように
画像プレビューと削除ボタンの表示ができました。

ここから削除ボタンをクリックすると、
画像と削除ボタンが無くなる、リセットさせる、には、
どのようなコードを書いたら良いか分かりません。

連日の質問になりますが、
アドバイス頂ければ幸いです。
よろしくお願い致します。

<div class='wrap'><label class='camera' for='camera'><input type="file" id='camera' name='file'></label></div>

$('input[type=file]').on('change', function () {
var self=$(this);
var file = $(this).prop('files')[0];
var reader = new FileReader();
reader.addEventListener('load',e=>{
self.parent().nextAll('img').remove();
self.parent().after($('<img>').attr({src:e.target.result}));
self.parent().after($('<button type="reset" class="delete"></button>'));
});
reader.readAsDataURL(file);
});

以下のコードは、
input fileで画像を選択した後のhtmlになります。

<div class="wrap"><label class="camera" for="camera"><input type="file" id="camera" name="file"></label><button type="reset" class="delete"></button><img src=""></div>

Answer 1

リセットが前提ならformで囲むほうがよいでしょう

<script>
$(function(){
  $('input[type=file]').on('change', function () {
    var self=$(this);
    var file = $(this).prop('files')[0];
    var reader = new FileReader();
    reader.addEventListener('load',e=>{
      $('.preview').remove();
      $('.delete').remove();
      self.closest('form')
        .append($('<img class="preview">').attr({src:e.target.result}))
        .append($('<button type="reset" class="delete">リセット</button>'));
    });
    reader.readAsDataURL(file);
  });
  $('form').on('reset',function(){
    $('.preview').remove();
  });
});
</script>
<form method="post" enctype="multipart/form-data">
<input type="file" id="camera" name="file">
</form>

Comments

[退会済みユーザー]

おかげさまで実装できました。
ありがとうございました。

Answer 2

imgとボタンを囲むブロックを設けて、そのブロックをremove
ブロック内にimgとボタンを設置するように改修してください

Comments

[退会済みユーザー]

アドバイスを頂きありがとうございました。