質問: e.dataTransfer.files; によってinputにデータを受け渡している。→削除するとinputのidが変わる。→しかしアップロードした際に引き渡したinputのidは削除前のものに引き渡されている。 jsでidの変更は行われているが、画像データの引き渡しとは連動していない。 具体的には、 ドラッグアンドドロップをする→inputのidがupload-form-2のものに画像ファイルが引き渡される。 upload-form-1のプレビューを削除→input(idがupload-form-1)のデータが削除され、upload-form-2がupload-form-1に変化する。 そのupload-form-1を削除する、しかし画像データはupload-form-2のものに引き渡したため、画像データがない(以下のエラー文が発生する)=削除イベントが実行されない。(javascriptは一度htmlを読み込んだ後に実行されるため、見た目でidは変化しているが、htmlは再度読み込まれていないため) ``` Uncaught TypeError: Cannot read property 'remove' of null ``` ### 対策として考えた事 削除イベント実施後、ページを再度リロードしてDOMの読み込みを実施すればいけるかも?と思いましたが、それを行うとアップロードした画像が全てリセットされてしまいました。(当たり前でした・・・) ### 教えていただきたい事 イメージはメルカリの商品出品時の画像アップロード機能です。 アップロードされた画像を消した際に、新たなidが付与され、その新たなidが付与されたものも削除したい場合どのように実装すれば良いでしょうか?
回答: 全体は見ていませんが、エラー箇所はここ。 ``` // var delete_input_data = document.getElementById('upload-form-' + delete_obj_id); // delete_input_data.remove(); // ↓ $('upload-form-' + delete_obj_id).remove(); ```