[JavaScript]登録した画像の削除

はじめに

現在フリマサイトを作成しています。商品を出品した後の編集画面にて、画像の変更機能を実装したいです。
そこでjsを用いて画像を削除し、dummy画像を表示し再度画像を登録できるようにしたいです。

現状

このように出品時に登録してあれば、その画像を表示、
なければダミー画像を表示させています
ダミー枠内をタップするとfileが開けます（display:none;適用）

コード

haml
1        .upload__box__images
2          -# 1枚目
3          .upload__box__image
4            %label{for: "product_images_attributes_0_image"}
5              - if @product.images.first.present?
6                = image_tag @product.images.first.image.url, alt: "Item upload" ,height: "100%", width: "100%", class: "preview-image"
7              - else
8                = image_tag "pict/item_upload_dummy.png", alt: "Item upload dummy", size: "210x195"
9            .upload__box__image-picker
10              = f.file_field :image, multiple: true, type: "file", accept: "image/*", name: "product[images_attributes][0][id]", id: "product_images_attributes_0_image", style: "display: none;"
11            .upload__box__image-delete
12              %span 削除
13          -# 2枚目
14          .upload__box__image
15            %label{for: "product_images_attributes_1_image"}
16              - if @product.images.second.present?
17                = image_tag @product.images.second.image.url, alt: "Item upload" ,height: "100%", width: "100%", class: "preview-image"
18              - else
19                = image_tag "pict/item_upload_dummy.png", alt: "Item upload dummy", size: "210x195"
20              .upload__box__image-picker
21                = f.file_field :image, multiple: true, type: "file", accept: "image/*", name: "product[images_attributes][1][id]", id: "product_images_attributes_1_image", style: "display: none;"
22            .upload__box__image-delete
23              %span 削除
24          -# 3枚目
25          .upload__box__image
26            %label{for: "product_images_attributes_2_image"}
27              - if @product.images.third.present?
28                = image_tag @product.images.third.image.url, alt: "Item upload" ,height: "100%", width: "100%"
29              - else
30                = image_tag "pict/item_upload_dummy.png", alt: "Item upload dummy", size: "210x195"
31              .upload__box__image-picker
32                = f.file_field :image, multiple: true, type: "file", accept: "image/*", name: "product[images_attributes][2][id]", id: "product_images_attributes_2_image", style: "display: none;"
33            .upload__box__image-delete
34              %span 削除

考察

削除ボタンを押した際に該当画像のidを取得し、フォームの中身を削除する
場合わけのelseにてダミー表示、再度画像の登録及びプレビューをする
これらの記述が必要である

最後に

メルカリのようなドロップ式の画像アップロードではなく、3枚と決められていて、
タップで登録するという、珍しい？型を採用しており、参考にできるものが見つからず苦戦しております

ご教授いただけると幸いです。

no1knows

2020/04/09 23:56

JavaScriptのどこでうまくいかないのか、ソースもふくめて追記いただくと回答がつきやすいかと思います。 https://teratail.com/help/avoid-asking また現状、画像の削除、画像の登録はできている。それをJavaScriptで行いたいということでしょうか？文章を読んでいる限りだとよくわからなかったので、何ができていて、何ができないのかなどの整理も必要かと思います。