【Ajax】destroy機能を非同期処理で行う方法

Question

現状と問題

railsでTwitterクローンアプリを作成しております。
各投稿にfontawesomeでdeleteボタンをつけていて、そこから削除を非同期で行いたいと考えております。
現状はボタンを押し、deleteの処理が行われますが、投稿一覧のページに反映されず、更新をすることで反映される状態です。
![

該当コード

//_index.html.erb
<div class="project-boxes jsGridView">
    <% @posts.each do |post| %>
        <div class="project-box-wrapper">
            <div class="project-box">
                <div class="project-box-header">
                    <div class="project-box-header-introduction">
                        <%= link_to attachment_image_tag(post.user, :profile_image, format: 'jpeg', size: "50x50", fallback: "no_image.jpg", size:'100x100'), user_path(post.user.id) %>
                        <%= link_to_if post.user, post.user.name, user_path(post.user.id) %>
                    </div>

                    <div class="post-action-#{ post.id }">
                        <%= link_to(content_tag(:i, nil, class: 'fas fa-edit'), edit_post_path(post), remote: true) %>
                        <%= link_to(content_tag(:i, nil, class: 'fas fa-trash-alt'), post_path(post), method: :delete, remote: true, data: { confirm: '本当に削除しますか？' }) %>
                    </div>
                </div>
                <div class="project-box-content-header">
                    <p class="box-content-header "><%=safe_join(post.body.split("\n"),tag(:br))%></p>
                </div>
                <div class="project-box-footer ">
                    <div id="likes_buttons_<%= post.id %>">
                        <%= render partial: 'posts/post', locals: {post: post} %>
                    </div>
                    <div class="days-left " style="color: #ff942e; ">
                        <%= l post.created_at, format: :default %>
                    </div>
                </div>
            </div>
        </div>
    <% end %>
</div>

$(".post-action-<%= @post.id %>").remove();

class PostsController < ApplicationController
  
  before_action :authenticate_user!

  def index
    @users = User.all
    @post = Post.new
    @posts = Post.order(created_at: :desc)
    @following_users = current_user.following_user
    @follower_users = current_user.follower_user
  end
  def destroy
    @post = Post.find(params[:id])
    @post_id = @post.id
    @post.destroy
    respond_to do |format|
      format.js
    end
    
  end
  
  private
  
  def post_params
    params.require(:post).permit(:body, :image, :user_id)
  end
end

最後に

destroy.js.erbでの処理がうまくいっていないのだとは思います。
.remove()をする際に選択しているセレクタが間違っているのでしょうか。
その投稿自体を消すならばeach文の真下の<div class="project-box-wrapper">をセレクタにしなければならないのでしょうか。
そうなるとpost.idが取れないので対象のものを削除できないのではないか、と多方向で迷っています。

ご回答何卒よろしくお願いいたします。

Answer 1

<!-- 間違い -->
<div class="post-action-#{ post.id }">

<!-- 以下にします -->
<div class="post-action-<%= post.id %>">

ただし、この位置にclass="post-action-<%= post.id %>" を追加するとボタンが消えるだけなので、
以下の位置に追加すると良いのではないでしょうか(本当はクラス名も修正した方が良い)。

<div class="project-box-wrapper post-action-<%= post.id %>">

Comments

[tomomomo]

回答ありがとうございます！
<div class="project-box-wrapper>より下にクラスまたはidを追加しなくてはいけないと考えておりましたが、追加することで解決できるのですね！

クラス名に関しては、post-<%= post.id %>の方がよろしいでしょうか？

[neko_daisuki]

重複しないならそれでもいいと思います。

[tomomomo]

ありがとうございます！