I just tried a lot and search for answers but found nothing....
I have comments in a post and user can edit their comments..
if he click the edit in the comment, a form will display in place of the comment...all of that is working but when you submit the updates the comment will go below the list of the comments in the same post, and the edit form will stay and if he submit it again another (dublicated) one will go below of the list...now if I refresh the page the updated comment will back to the right place and the dublicated one will get removed...
how to solve that? I want to replace the form with the updated commetns instead and without refresh...

here is my post footer where the comments are desiplayed:

```
<div class="panel-footer" id="panel_footer_<%= post.id %>">
  <div class="comment-form" id="comment-form-j">
    <%= render 'comment2', post: post, comment: post.comments.build %>
  </div>
  <div class="comments" id= "comments_<%= post.id %>">
    <% if post.comments.present? %>
      <%= render post.comments, post: post %>
    <% end %>
  </div>
</div>

```

here is my comment partial \_comment.html.erb :

```
<% if  comment.user_id.present? %>
  <div id="current_comment_<%= comment.id %>" >
    <div id="comment">
        <div id="avatar_comment_<%= comment.user_id %>">
            <%= link_to image_tag(comment.user.avatar.url, size: "30x30", class: "img-circle img-comments"), profile_path(comment.user.user_name) %>
        </div>
        <div class="user-name">
            <%= link_to comment.user.user_name, profile_path(comment.user.user_name), class: "username-size" %>
        </div>
        <div class="comment-content comment-with-menu menu-comment-line" id = "this_comment_<%= comment.id %>" >
          <%= comment.content %>
        </div>
        <% if comment.user == current_user %>
          <ul class="comment-menuu menu-comment-line">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle menu-right-comment  " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><%= link_to "Edit", edit_post_comment_path(post, comment), remote: true %></li>
                <li role="separator" class="divider"></li>
                <li><%= link_to "delete", post_comment_path(post, comment), method: :delete, data: { confirm: "Are you sure?" }, remote: true %></li>
              </ul>
            </li>
          </ul> 
        <% end %>
    </div>
  </div>
<% end %>

```

here is my comment form under posts(\_comment2.html.erb): 

```
<%= form_for([post, comment], remote: true) do |f| %>
  <%= f.text_field :content, placeholder: 'Add a comment...', class: "form-control comment_content", id: "comment_content_#{post.id}"  %>
<% end %>

```

here is my edit.js.erb under comments:

```
$("#this_comment_<%= @comment.id %>").replaceWith("<%= j render 'posts/comment2', post: @post, comment: @comment %>");

```

here is my update.js.erb under comments:

```
$('#comments_<%= @post.id %>').append("<%=j render 'comments/comment', post: @post, comment: @comment, remote: true %>");

```

and here is the comment controller where the edit and update:

```
def edit
  @comment = @post.comments.find(params[:id])
  respond_to do |format|
    format.js 
  end
end

def update
  @comment = @post.comments.find(params[:id])   

  if @comment.user_id == current_user.id
     if @comment.update(comments_params)
       respond_to do |format|
         format.html {redirect_to root_path}
         format.js 
        end
     else
       flash[:alert] = "Something worng, try again"
       render root_path
     end
  end
end

```

[![enter image description here](https://i.stack.imgur.com/8uR5F.png)](https://i.stack.imgur.com/8uR5F.png)