Невозможно удалить форму комментария из DOM при удалении сообщения

0

Я могу удалить форму комментария, когда комментариев нет, но если есть комментарий к сообщению, я не могу удалить форму. Я не уверен, что я делаю неправильно, попытался удалить форму комментария несколькими разными способами. Мой код ниже, любая помощь очень ценится.

<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>

Ниже приведены различия между комментариями и комментариями для определенной записи при удалении:

НЕ ПРИСУТСТВУЕТ

--- $ comments---

[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", конструктор: функция, init: function...]

НАСТОЯЩЕЕ ВРЕМЯ

--- $ comments---

[article.com, script, prevObject: jQuery.fn.jQuery.init [1], контекст: form # post-delete-44.delete, jquery: "1.10.2", конструктор: function, init: function...]

--- $ commentForm---

[prevObject: jQuery.fn.jQuery.init [1], context: form # post-delete-44.delete, jquery: "1.10.2", конструктор: function, init: function...]

  • 0
    Живой пример поможет увидеть вывод консоли.
  • 0
    добавлен вывод консоли при ведении журнала $ comments & $ commentForm
Показать ещё 2 комментария
Теги:

2 ответа

0

Это не работает!

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

Пытаться

var $commentForm = $comments.next();
  • 0
    Почему это не сработает? Кроме того, ваше решение не будет работать, если нет комментариев.
0

Изменение сценария

<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>
  • 0
    Это не решение проблемы ... также ненужное преобразование.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню