画像プレビュー機能で画像が表示されている場合のみ、すでに存在している画像を削除するところでプレビュー画像以外の画像を消してしまう問題点を解決したい

Question

前提・実現したいこと

rubyでjsファイルを使ってプレビュー機能を実装しています
現状プレビューはできているのですがプレビューしたときに
image_tagで貼り付けてある他の画像が消えてしまい
画像をプレビューで変えるたび更に他の画像が消えてしまうので
プレビュー画像は変えられるけど他の画像は消えないようにしたいです

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

エラーメッセージ

該当のソースコード

ソースコード <header class='top-page-header'>
  <div class='search-bar-contents'>
    <%= link_to image_tag("cook-do1.png", class:"furima-icon", id:"cook-do1"), "/" %>
    <form class="search-form" action="#">
      <input class='input-box' placeholder='キーワードから探す'>
      <button class="search-button">
        <%= image_tag "search.png", class:"search-icon", id:"search-icon" %>
      </button>
    </form>
  </div>
  <div class='nav'>
    <ul class='lists-left'>
      <li><%= link_to 'ジャンル', "#", class: "category-list" %></li>
    </ul>
    <ul class='lists-right'>
       <% if user_signed_in? %>
       <li><%= link_to 'レシピ作成', new_user_recipe_path(:user_id), method: :get, class: "recipe_new" %></li>
       <li><%= link_to current_user.nickname, "", class: "user-nickname" %></li>
       <li><%= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: "logout" %></li>
       <% else %>
       <li><%= link_to 'ログイン', new_user_session_path, method: :get, class: "login" %></li>
       <li><%= link_to '新規登録', new_user_registration_path, method: :get, class: "sign-up" %></li>
       <% end %>
    </ul>
  </div>
</header>
### 省略　###
<label class="#">料理の画像</label> 
         <%= f.file_field :image, id:"message_image"%>
        <div id="image-list"></div>```

``````java

```java 
document.addEventListener('DOMContentLoaded', function(){
    const ImageList = document.getElementById('image-list');

    const createImageHTML = (blob) => {
       // 画像を表示するためのdiv要素を生成
      const imageElement = document.createElement('div');

      // 表示する画像を生成
      const blobImage = document.createElement('img');
      blobImage.setAttribute('src', blob);
     
    

      // 生成したHTMLの要素をブラウザに表示させる
      imageElement.appendChild(blobImage);
      ImageList.appendChild(imageElement);
    };

    document.getElementById('message_image').addEventListener('change', function(e){
      // 画像が表示されている場合のみ、すでに存在している画像を削除する
      const imageContent = document.querySelector('img');
      if (imageContent){
        imageContent.remove();
      }

      const file = e.target.files[0];
      const blob = window.URL.createObjectURL(file);
      
      createImageHTML(blob);

      
    });
  });

### 試したこと

querySelectorでimgと漠然と取得しているからか
だからimg全般から取得して消去するのでimage-tagのimgも対象になってしまう
限定的に値を検索することができるのか色々調べてみましたが
たどり着けませんでした

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

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

Answer 1

createImageHTML するときに id を設定して削除時にそれを指定すれば良いのではないでしょうか。

const createImageHTML = (blob) => {  
  ...
  const imageElement = document.createElement('div');  
  imageElement.id = "currentThumb"
  ...

document.getElementById('message_image').addEventListener('change', function(e){  
  ...
  const imageContent = document.querySelector('#currentThumb');
  ...

Comments

[kengoal]

imageElementに紐付くidを設定して
querySelectorでそのidを取得するのですね！
取得の仕方がわからなくて途方にくれていたところ
助かりました！ありがとうございます