複数画像投稿時のプレビューを消したい。

前提・実現したいこと

画像の複数画像投稿の画像プレビューを表示した際に画像ファイルをキャンセルしたときにプレビューは消えずに残ってしまうのでファイルをキャンセルしたときに一緒にプレビューが消えるようにしたいのと、プレビュー表示と同時にinput要素が生成されてしまうのでプレビューが消えた際に生成されたinput要素も消したいです。

発生している問題・エラーメッセージ

該当のソースコード

rails
1    <div class="img-upload">
2      <div class="weight-bold-text">
3        商品画像
4        <span class="indispensable">必須</span>
5      </div>
6      <div class="click-upload">
7        <p>
8          クリックしてファイルをアップロード
9        </p>
10        <%= f.file_field :images, name: 'item[images][]', id:"item-image", data: {index: 0} %>
11        <div id="image-list"></div>
12      </div>
13    </div>

javascript
1document.addEventListener('DOMContentLoaded', function(){
2  if ( document.getElementById('item-image')){
3    const ImageList = document.getElementById('image-list')
4
5    const createImageHTML = (blob) => {
6
7      const imageElement = document.createElement('div');
8      imageElement.setAttribute('class', "image-element")
9      let imageElementNum = document.querySelectorAll('.image-element').length
10
11      const blobImage = document.createElement('img');
12      blobImage.setAttribute('src', blob);
13
14      const inputHTML = document.createElement('input')
15      inputHTML.setAttribute('id', `item_image_${imageElementNum}`)
16      inputHTML.setAttribute('name', 'item[images][]')
17      inputHTML.setAttribute('type', 'file')
18      inputHTML.setAttribute('data-index', imageElementNum + 1)
19
20  
21      imageElement.appendChild(blobImage);
22      imageElement.appendChild(inputHTML);
23      ImageList.appendChild(imageElement);
24
25
26      inputHTML.addEventListener('change', (e) => {
27        file = e.target.files[0];
28
29        blob = window.URL.createObjectURL(file);
30
31        createImageHTML(blob);
32      })
33    };
34
35    document.getElementById('item-image').addEventListener('change', function(e){
36      let file = e.target.files[0];
37
38      let blob = window.URL.createObjectURL(file);
39
40
41      createImageHTML(blob);
42    });
43
44
45  }
46});

試したこと

ファイルがキャンセルされたときなので
↓で取得して
dataDelete = document.querySelector('image-element')
dataDelete.getAttribute('img')
dataDelete.getAttribute('[data-index]="imageElementNum"')
↓で条件分岐してみた
if(!file){
dataDelete.remove('[data-index]="imageElementNum"'));
if (!'[data-index]="imageElementNum"'){
dataDelete.remove('img')
}
}