クリックイベントが複数実行される

Question

前提・実現したいこと

https://codeday.me/jp/qa/20190301/345419.html

上記のサイトを元に、画像をアップロードして表示させましたが、「Remove image」を押下すると、

$(this).parent(".pip").remove();

の処理が複数回実行(表示されている画像分だけ？)されてしまいます。
この行の下に処理を追加したいのですが、複数回実行されると値の増減などを行ったときに意図しない数値になるため、
1回に留めたいのですが、可能でしょうか。

よろしくお願いします。

環境：ローカル環境内で実行
ブラウザ:IE11、chrome

コード

$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });
          
          // Old code here
          /*$("<img></img>", {
            class: "imageThumb",
            src: e.target.result,
            title: file.name + " | Click to remove"
          }).insertAfter("#files").click(function(){$(this).remove();});*/
          
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});

<div class="field" align="left">
  <h3>Upload your images</h3>
  <input type="file" id="files" name="files[]" multiple />
</div>

input[type="file"] {
  display: block;
}
.imageThumb {
  max-height: 75px;
  border: 2px solid;
  padding: 1px;
  cursor: pointer;
}
.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}
.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}

試したこと

on('click', function())に変えたり、return falseや$('input[type=file]').val('');によるクリアなどは試みましたがダメでした。

Answer 1

for文の中で$(".remove").clickを指定しているのでforのループ回数だけ
イベントが追加されますね
inputタグがformに内在していないのでどこまで遡ればいいかわからづらいですが
.fieldの要素として処理してみてはどうでしょうか？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
      filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i];
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove image</span>" +
            "</span>").insertAfter("#files");
        });
        fileReader.readAsDataURL(f);
      }
    }).closest(".field").on('click','.remove',function(){
      $(this).parent(".pip").remove();
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});
</script>

<div class="field" align="left">
  <h3>Upload your images</h3>
  <input type="file" id="files" name="files[]" multiple />
</div>

Comments

[asr1919]

素早い回答ありがとうございます。
数分の差ですが、早く回答してくださった方にベストアンサーを送らせていただきました。
申し訳ございません。

こちらの方法でも無事思った通りの処理ができました。

Answer 2

下記部分を.removeではなく特定の要素に置き換えてしまいましょう。（複数ある場合全ての.removeにクリックイベントを付与してしまっているため）

          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });

もしくはon("change"の外に出して、個別に設定するのを止めるかどちらかだと思います。

$( 'body' ).on( 'click', '.remove', function() {
  $(this).parent(".pip").remove();
} );

【【jQuery】onメソッドの使用方法 - Qiita】
https://qiita.com/katsunory/items/7b50d399329767a893e1#selectorでイベントデリゲート

【実践、jQuery - .on()と.off()を使いこなす 1 | CodeGrid】
https://app.codegrid.net/entry/practical-jquery-1

Comments

[asr1919]

素早い回答ありがとうございます。
イベントの解説したサイトまで張っていただき、とても助かりました。

無事解決致しました。