送信したメッセージをclickした際に削除ボタンを表示させたのですが、一つ削除ボタンが表示されると他のメッセージをクリックしても他に削除ボタンが表示されている状態だと表示されないようにしたいです。

前提・実現したいこと

railsとJavaScriptを使いLINEのようなチャットアプリを作成しています。
送信したメッセージをclickした際に削除ボタンを表示させたのですが、一つ削除ボタンが表示されると他のメッセージをクリックしても他に削除ボタンが表示されている状態だと表示されないようにしたいです。

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

いまのところ削除ボタンは出現させることはできるのですが、複数の削除ボタンを表示させることができます。

該当のソースコード

ruby
1<% @messages.each do |message|%>
2      <% if user_signed_in? %>
3        <% if message.user_id == current_user.id %>
4          <div class="mycomment" >
5            <%= link_to '削除する', room_message_path(@room,message), method: :delete, class: "delete-btn hidden", id: "destroy"%>
6            <%= message.read ? '既読' : '  '%>
7            <%= l message.created_at, format: :short%>
8            <p id= 'mycomment' class='my'><%= message.content %></p>
9          </div>
10        <% else %>
11          <div class="fukidasi">
12            <div class="faceicon">
13              <%= image_tag @room.celeb.image, class: 'img' %>
14            </div>
15            <div class="chatting">
16              <div class="says">
17                <p><%= message.content %></p>
18              </div>
19              <div class='created_at'>
20                <%= l message.created_at, format: :short %>
21              </div>
22            </div>
23          </div>
24        <% end %>

javascript
1function pullDown(){
2  
3  const myComment = document.querySelectorAll(".my")
4
5  myComment.forEach(function(list) {
6
7  list.addEventListener('click', function(){
8    
9    const deleteButton = list.parentNode.querySelector(".delete-btn")
10    deleteButton.classList.toggle("hidden")
11    
12  })
13  })
14}
15
16document.addEventListener("turbolinks:load", pullDown)

eachメソッドで表示されたclass=myをclickすると削除ボタンが表示されるという仕組みです

試したこと

jsの方に条件分岐をする文を含めようかと思ったのですが、書き方がいまいちわかりませんでした。

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

rails [6.0]
返信は早く返します！！

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

回答1件

ベストアンサー

表示状態を変更する前にすべての.delete-btnにhiddenクラスを付与します。

javascript
1list.addEventListener('click', function(){
2  const deleteButtons = document.querySelectorAll(".delete-btn")
3  deleteButtons.forEach(button => button.classList.add("hidden") )
4
5  const deleteButton = list.parentNode.querySelector(".delete-btn")
6  deleteButton.classList.toggle("hidden")
7})