jQuery .closest () не работает после вызова AJAX?

Question

Я пытаюсь удалить div после вызова AJAX, но функция .closest() не работает должным образом.Как я понимаю, он поднимается, пока не найдет совпадение.

<div class="comments">
  <div class="commment">
    <p>
      <strong>admin</strong> - 2018-10-10 08:50:03
    </p>
    <p>az</p>
    <form id="deleteCommentForm" method="POST" action="http://127.0.0.1:8000/comments/30" accept-charset="UTF-8">
      <input name="_method" type="hidden" value="DELETE"><input name="_token" type="hidden" value="FmNpDb8bmwTLPgTYUuyGxsvAuluyskXVYs9p0rdu">
      <button type="submit" id="completed-task" class="fabutton" style="background: none; padding: 0px; border: none;">
        <i class="fas fa-trash-alt"></i>
      </button>
    </form>
    <hr>
  </div>
</div>

$('#deleteCommentForm').on('submit', function(e) {
  e.preventDefault();

  let action = $(this).attr('action');

  axios.delete(action, []).then(function(response) {
    $(this).closest('div.comment').remove();
  });
});

Answer 1

Вы, вероятно, потеряли значение 'this' в функции обратного вызова ajax.Вы можете просто заменить функцию на функцию стрелки

axios.delete(action, []).then(response => {
    $(this).closest('div.comment').remove();
});

Answer 2

область вашего ответа ajax не та, которую вы ожидаете

$('#deleteCommentForm').on('submit', function(e) {
  // stop all bubbling of the event
  e.preventDefault();
  e.stopPropagination();
  e.stopImmediatePropagation();

  let action = $(this).attr('action');

  // first way - using lamda function decoration does not change your scope on this
  axios.delete(action, []).then((response) => {
    $(this).closest('div.comment').remove();
  });

  // second Way -- store this to an accessable variable
  let element = this; 
  axios.delete(action, []).then(function(response) {
    $(element).closest('div.comment').remove();
  });

});

Answer 3

Контекст this изменяется в функции callback, поэтому вам необходимо его кэшировать.

$('#deleteCommentForm').on('submit', function(e) {
  e.preventDefault();
  let $this = $(this);                      // <-- Add this code.
  let action = $this.attr('action');        // <-- Update here.

  axios.delete(action, []).then(function(response) {
    $this.closest('div.comment').remove();  // <-- Update here.
  });
});

Таким образом, всякий раз, когда запускается новая функция, контекст всегда изменяется.Чтобы сослаться на родительский контекст, определите переменную в этой области.