app.js

app.js

$(function ($) {
  "use strict";
  // нахожу элемент с классом loading
  const loading = $('.loading');
  // нахожу мета тег с именем csrf-token и беру его значение в атрибуте content
  const token = $('meta[name="csrf-token"]').attr('content')
  // отслеживаю клики по ссылкам с классом delete-brand 
  // которые выгдядят <a href="#" class="delete-brand" data-id="3">

  $('.delete-brand').on('click', function(e){
    // отменяю действия браузера по умолчанию. В данном случае щелчок по ссылке должен вызвать переход на другую страницу и пролистывания к элементу страницы
    e.preventDefault();
    // нахожу значение id в текущей ссылке this - текущий элемент
    const id = $(this).data('id');
    // нахожу родительский элемент tr
    const parentEl = $(this).closest('tr');
    
    // отправляю асинхронный запрос на сервер с данными id, token в формате json
    $.ajax({
        url: `/admin/brand/${id}`,
        method: "DELETE",
        dataType: 'json',
        data: {
          id,
          "_token": token,
        },
        beforeSend:  () => {
        // показываю анимированный элемент который обозначает что запрос отправлен и нужно подождать ответ
            loading.show();
        }
    })
    // обрабатываю ответ от сервера и вывожу сообщение пользователю
    .done((res) => {
      console.log(res);

      if(res.success) {
        parentEl.remove();
        toastr.success('Бренд удален!', 'Успешно');
      }
      loading.hide();
    })
    // в случае неудавщегося запроса вывожу сообщение пользователю об ошибке
      .fail( (res) => {
        toastr.error('Произошла ошибка.', 'Ошибка!')
            
        loading.hide();
      });
  });
});