画像アップロード機能の削除ボタンの位置がうまくいかない

前提

画像アップロード機能を作成するにあたり、inputのtype=fileを非表示にし、divで作成したエリア選択して画像アップロードさせる機能を作ろうとしています。

実現したいこと

【画像アップロード前】

【画像アップロード後】

上記画像の通り、画像アップロードするところまでは、できました。しかし「×」のボタンを押して削除機能を作るにあたり、「<label>」による「<input type="file" name="thumbnail" hidden accept=".png, .jpeg, .jpg">」の紐付けの影響で「 <div class="delete_spot_photo delete_photo">」での削除後ファイル選択が開いてしまいます。
「<div class="delete_spot_photo delete_photo"><span>×</span></div>」を「<label>」の外に出した場合、「<div class="thumbnail">」配下ではないのでpositionが効かず、スクショの通りの位置に「×」のボタンを設置できません。
どのようにすれば、「<label>」の紐付けの影響を受けずに「×」のボタンを設置することができるのでしょうか？
※「×」のボタンを「<label>」の外に置くと「×」のボタンのheight:50px分「 <div class="thumbnail">」と「 <img class="thumbnail-img">」の位置がずれてしまいます。

該当のソースコード

html
1<label>
2   <div class="thumbnail">
3         <div class="delete_spot_photo delete_photo"><span>×</span></div>
4         <img class="thumbnail-img">
5         <span class="photo">写真追加</span>
6     </div>
7    <input type="file" name="thumbnail" hidden accept=".png, .jpeg, .jpg">
8</label>

css
1<label>
2.thumbnail {
3  width: 600px;
4  height: 400px;
5  border: 1px dashed skyblue;
6  position: relative;
7  display: flex;
8  justify-content: flex-end;
9}
10
11.thumbnail-img {
12  position: absolute;
13  width: 600px;
14  height: 400px;
15  top: 0;
16  z-index: 1;
17}
18
19.delete_photo {
20  display: none;
21  z-index: 2;
22  background-color: white;
23}
24
25.delete_thumbnail {
26  position: relative;
27  width: 50px;
28  height: 50px;
29}
30
31.delete_thumbnail > span {
32  font-size: 20px;
33  position: absolute;
34  top: 50%;
35  left: 50%;
36  transform: translateY(-50%) translateX(-50%);
37}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

event.preventDefault();を使うとイベントを抑止できますよ。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        .thumbnail {
10            width: 600px;
11            height: 400px;
12            border: 1px dashed skyblue;
13            position: relative;
14            display: flex;
15            justify-content: flex-end;
16        }
17
18        .thumbnail-img {
19            position: absolute;
20            width: 600px;
21            height: 400px;
22            top: 0;
23            z-index: 2;
24        }
25
26        .delete_photo {
27            display: none;
28            z-index: 3;
29            background-color: white;
30        }
31
32        .delete_thumbnail {
33            position: relative;
34            width: 50px;
35            height: 50px;
36        }
37
38        .delete_thumbnail > span {
39            font-size: 20px;
40            position: absolute;
41            top: 50%;
42            left: 50%;
43            transform: translateY(-50%) translateX(-50%);
44        }
45    </style>
46    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
47    <script>
48        $((event) => {
49            const preview = $('.thumbnail-img').eq(0);
50            const fileelem = $('input[type=file]');
51            const deletebutton = $('.delete_photo').eq(0);
52            const photo = $('.photo').eq(0);
53            preview.hide();
54            deletebutton.on('click', (event) => {
55                preview.attr('src', '');
56                preview.hide();
57                deletebutton.hide();
58                photo.show();
59                event.preventDefault();
60                return false;
61            });
62            fileelem.on('change', (event) => {
63                let filebase = fileelem.get(0);
64                let file = filebase.files[0];
65                let reader = new FileReader();
66                reader.addEventListener("load", function () {
67                    preview.show();
68                    preview.attr('src', reader.result);
69                    deletebutton.show()
70                    photo.hide();
71                }, false);
72
73                if (file) {
74                    reader.readAsDataURL(file);
75                }
76            });
77        });
78    </script>
79</head>
80
81<body>
82    <label>
83        <div class="thumbnail">
84            <div class="delete_thumbnail delete_photo"><span>×</span></div>
85            <img class="thumbnail-img">
86            <span class="photo">写真追加</span>
87        </div>
88        <input type="file" name="thumbnail" hidden accept=".png, .jpeg, .jpg">
89    </label>
90</body>
91
92</html>