javascriptで色をつける→削除の動作をどの要素をクリックしても行えるようにしたい。

Question

前提・実現したいこと

現在javascriptで、色を変えたり要素を削除する処理を追加しています。
アプリの概要としては、メモを非同期で１回目のクリックで色を変えて、２回目のクリックで削除する形です。
メモの順番に関係なく、メモをクリックしたときに１回目のクリックで色がつき２回目のクリックで削除されるような動作をさせたいです。

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

色を変えて削除する動作自体の実装はできたのですが、以下のような動作になってしまい思うようにいきません。（引数を加味しているからだと思っている）

エラーメッセージ
1個目のメモを色をつけて消した後、2個目のメモをクリックすると3個目のメモが反応して色が付いてしまう。
以下動作の様子
https://gyazo.com/2f7e8662ed5dea65d0e4b66cc1c2f2e2

該当のソースコード

window.addEventListener('load', function(){
  const memos = document.getElementsByClassName('memo')

    for(let i = 0; i < memos.length; i++){
      memos[i].addEventListener('click', function(){
        const result = memos[i].hasAttribute('style')
        if(result == false){
        memos[i].setAttribute("style", "background-color:#808080;")
        }else{ 
          const element = document.querySelector('section')
            element.remove()
        }
    })
    }
})

<div class="memos">
  <% @memos.each do |memo| %>
  <section>
    <div class="memo">
      <div class="memo-item"><%= memo.item %></div>
      <div class="memo-text"><%= memo.text %></div>
    </div>
    </section>
  <% end %>
</div>

試したこと

if文を使わずにfor文を色を付ける動作と削除する動作で分けましたが、片方だけの動作しかせずにうまくいきませんでした。
まだ未熟なため考え方自体が間違っているかもしれないのですが、そのさいは考え方から教えていただけると幸いです。

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

ruby '2.6.5'
gem 'rails', '~> 6.0.0'
gem 'mysql2', '0.5.3'

Answer 1

1個目のメモを色をつけて消した後、2個目のメモをクリックすると3個目のメモが反応して色が付いてしまうのは「memo」というclass名で指定しているからです。
JavaScriptでクリックしたところだけにイベントを発火させるには「this」を使ってみるといいのではないでしょうか？
Rubyは触ったことがないので何とも言えないのですが、JavaScriptでクリックイベントを実装するときに「this」はよく使うので下記のリンクを参考にしてみてください。

https://uxmilk.jp/30476

Comments

[退会済みユーザー]

ありがとうございます！
参考にして調べてみます