删除帖子时无法从 DOM 中删除评论表单

Question

当帖子上没有 cmets 时，我可以删除评论表单，但如果帖子上有评论，我无法删除表单。我不确定我做错了什么，尝试了几种不同的方式删除评论表单。我的代码如下，非常感谢任何帮助。

<article class="post">
  <div class="group">

    <div class="post-header-thumb">
      <a href="<%= user_url(post.user) %>">
        <img src="<%= post.user.profile_photo(:thumb) %>" alt="">
      </a>
    </div>

    <div class="post-user-info">
      <div class="name">
        <%= post.user.full_name %>
      </div>
      <div class="role">
        <!-- user.role_in_course -->
      </div>
      <div class="post-time">
        posted <%= time_ago_in_words(post.created_at) %> ago
      </div>
    </div>

    <% if post.user == current_user || post.course.has_write_permission?(current_user) %>

      <div class="post-controls">
        <div class="post-edit">
          <%= link_to "Edit", edit_post_url(post), id: "post-edit-#{post.id}", remote: true %>
        </div>

        <form 
          class="delete"
          id="post-delete-<%= post.id %>" 
          action="<%= post_url(post) %>" 
          method="POST"
          data-remote="true">

          <input
            type="hidden"
            name="authenticity_token"
            value="<%= form_authenticity_token %>">

          <input
            type="hidden"
            name="_method"
            value="DELETE">

          <input type="submit" class="post-delete" value="X">
        </form>
      </div>

    <% end %>
  </div>

  <p class="post-content">
    <%= post.body %>
  </p>

</article>

<% post.comments.each do |comment| %>
    <%= render comment %>
<% end %>

<form 
  class="comment-form"
  id="comment-form-<%= post.comments.size + 1 %>" 
  action="<%= post_comments_url(post) %>" 
  method="POST" 
  data-remote="true">

  <input
     name="authenticity_token"
     type="hidden"
     value="<%= form_authenticity_token %>">

  <fieldset class="comment-form-container">
    <textarea rows="1" cols="50" name="comment[body]" id="comment_body" placeholder="Comment here..."></textarea>
  </fieldset>

  <input type="hidden" name="comment[post_id]" value="<%= post.id %>">

  <div class="submit comment-submit">
    <input type="submit" class="comment-submit-button" value="Comment">
  </div>
</form>

<script>
  $(document).ready(function(event) {

    $("#post-edit-<%= post.id %>").on("ajax:success", function(event, data) {
      var $post = $(this).closest('.post');
      var $commentForm = $post.next('.comment-form')

      $post.parent().prepend(data);
      $commentForm.detach();
      $post.detach();
    });


    $("#post-delete-<%= post.id %>").on("ajax:success", function(event, data) {
        var $post = $(this).closest('.post');
        var $comments = $post.nextUntil('.comment-form');
        var $commentForm = $post.next('.comment-form');

        $post.remove();
        $comments.remove();
        $commentForm.remove();
    });
</script>

以下是删除后某个帖子存在评论和不存在评论之间的区别：

不存在

---$cmets---

[prevObject: jQuery.fn.jQuery.init[1], context: form#post-delete-45.delete, jquery: "1.10.2", 构造函数: function, init: function…]

---$commentForm---

[form#comment-form-1.comment-form, prevObject: jQuery.fn.jQuery.init[1], context: form#post-delete-45.delete, jquery: "1.10.2", 构造函数：函数，初始化：函数...]

现在

---$cmets---

[article.comment, script, prevObject: jQuery.fn.jQuery.init[1], context: form#post-delete-44.delete, jquery: "1.10.2", constructor: function, init: function …]

---$commentForm---

[prevObject: jQuery.fn.jQuery.init[1], context: form#post-delete-44.delete, jquery: "1.10.2", 构造函数: function, init: function…]

Answer 1

脚本更改

<script>
  $(document).ready(function(event) {

    $("#post-edit-"+<%= post.id.to_s %>).on("ajax:success", function(event, data) {
      var $post = $(this).closest('.post');
      var $commentForm = $post.next('.comment-form')

      $post.parent().prepend(data);
      $commentForm.detach();
      $post.detach();
    });


    $("#post-delete-"+<%= post.id.to_s %>).on("ajax:success", function(event, data) {
        var $post = $(this).closest('.post');
        var $comments = $post.nextUntil('.comment-form');
        var $commentForm = $post.next('.comment-form');

        $post.remove();
        $comments.remove();
        $commentForm.remove();
    });
</script>

Answer 2

这行不通！

var $commentForm = $post.next('.comment-form');

试试

var $commentForm = $comments.next();