each文で表示している記事を、ボタンを押して非表示にする方法

タイトルの通り、Rubyのeach文で表示している記事を、右上につけた×ボタン（アイコン）を押下して非表示にする方法を紹介します。

#Point① document.getElementsByClassNameで要素を取得する
JavaScriptで対象となる要素を取得する時は
document.getElementById("id名")や
document.getElementsByClassName("class名")などを使いますが、
今回はRubyのeach文で表示させた要素になるため、複数のid名（またはclass名）が存在することになります。
idはhtml上に１つしか存在させはいけないルールがあるため、もしこちらを使うと１番最初の要素だけに機能が実装されます（経験済み）
class名なら複数存在しても全ての要素に適用できるため、document.getElementsByClassName("class名")を使用しましょう。
以下Rubyの参考コードです。（実際に開発中のものをわかりやすいように書き換えているので、あくまでも参考程度に。。。）

index.rb

<% @articles.each do |article| %>
  <div class="hide_area">
    <div>
      <i class="hide_btn"></i>
    </div>
    <%= image_tag article.image.variant(resize: "400x400") %>
    <div>
      タイトル　：　<%= result.article.title %>
    </div>
    <div>
      本文 ： <%= result.article.article_text %>
    </div>
  </div>
<% end %>

#Point② class名に添字を指定して取得する
単純にdocument.getElementsByClassName("class名")では要素を取得できません。
以下のようにfor文でclassの数分（かずぶん）繰り返し処理をして、class名に添字を指定します。

hide_article.js

const hide_article = () => {
  const hide_btn = document.getElementsByClassName('hide_btn');
  const hide_area = document.getElementsByClassName('hide_area');

  for (let i = 0; i < hide_btn.length; i++) {
    hide_btn[i].addEventListener('click', () => {
      hide_area[i].style.display = "none";
    }, false);
  };
};

window.addEventListener('load', hide_article);

以上です。
最後まで読んでいただきありがとうございます！
間違いなどありましたらぜひご指摘ください。