Railsで画面遷移せずにデータを更新する方法

Question

前提・実現したいこと

Railsにて画面遷移せずにデータの更新を行いたいと思っています。

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

現在の実装だと画面をスクロールした後にデータの更新（ポストを削除）を行うと、ページ遷移が行われてページの先頭に戻ってしまいます。
データ更新しても、ページの先頭に戻らないようにしたいです。

どなたかわかる方いらっしゃいましたら教えていただけると幸いです。

該当のソースコード

<% @posts.each do |post| %>
  <li>
    <%= link_to post.title, post_path(post) %>
    <%= link_to '[Edit]', edit_post_path(post), class: 'command' %>
    <%= link_to '[x]', post_path(post), method: :delete, class: 'command', data: { confirm: 'Sure' } %>
  </li>
<% end %>

  def destroy
    @post = Post.find(params[:id])
    @post.destroy
    redirect_to posts_path
  end

Answer 1

<% @posts.each do |post| %>
  <li id=post_<%= post.id %>>
    <%= link_to post.title, post_path(post) %>
    <%= link_to '[Edit]', edit_post_path(post), class: 'command' %>
    <%= link_to '[x]', post_path(post), method: :delete, remote: true, class: 'command', data: { confirm: 'Sure' } %>
  </li>
<% end %>

  def destroy
    @post = Post.find(params[:id])
    @post.destroy
    respond_to do |format|
      format.js
      format.html { redirect_to posts_path }
    end
  end

app/views/posts/destroy.js.erb

$('#post_<%= @post.id %>').remove();

Comments

[gnx_vw903]

ありがとうございます！試してみます！

[gnx_vw903]

ページの先頭には戻らなくなったのですが、[x]を押してもポストが消えなくなりました、
おそらくJSがうまく作動してないと思うのですが、JSを動かすために何か特別なことをする必要はございますか？

[asm]

ブラウザの開発者コンソールにエラーメッセージ等は出ていませんか？

[gnx_vw903]

「$ is not defined」ってエラーが出ています

[asm]

なるほどjQueryがRails5以降デフォルトから外れた件ですね
document.querySelector("#post_<%= @post.id %>").remove();
ならいけるかもしれません。

[gnx_vw903]

ありがとうございます！無事成功しました！