После успеха Ajax запрашивает, как манипулировать DOM и игнорировать рекурсивные вызовы в Ruby на рельсах.

Question

В rails мы использовали удаленный атрибут для выполнения запроса ajax, а затем выполнялся файл js .erb. Вот некоторые данные. Здесь, если я удаляю одну строку, счетчик div должен быть уменьшен на 1. Это нормально для первого вызова после обновления страницы. но когда я сделал это во второй раз, функция вызывается дважды, а для третьего удаления она вызывается 3 раза. Я включил несколько скриншотов. Моя проблема не в ajax. Проблема возникает, когда я добавил контроллер и код js.

Браузер: Нажмите на нее, чтобы увидеть изображение

Код контроллера:

  def destroy
     @expense.destroy
  end

destroy. js .erb

$('.destroy_link').on('ajax:complete', function () {
    $(this).closest('tr').fadeOut();
    let btn = $(this).parents().eq(6).find('.accordion'); //find selector
    let str = btn.text(); //string
    let number = str.match(/(\d+)/); //extract integer
    console.log(number[0]); //print the countin console
    number[0] -= 1;
    let arr = str.split(' ');
    btn.text(`${arr[0]} (${number[0]})`);
});

HTML код:

<div>
    <button class="accordion btn btn-warning" data-toggle="collapse" data-target="#pending">Pending
      (<%= @pending_expenses.count %>)
    </button>
    <div class="collapse show in" id="pending">
      <% @number = expenses.offset + 1 %>
<div class="table-responsive-sm">
  <table class="table table-bordered">
    <thead>
    <tr>
      <th>Sl</th>
      <th>Name</th>
      <th>Employee</th>
      <th>Cost</th>
      <th>Category</th>
      <th style="text-align: center;">Action</th>
    </tr>
    </thead>
    <% expenses.each do |expense| %>
         <tr>
  <td><%= @number %> </td>
  <% @number += 1 %>
  <td><%= expense.product_name %></td>
  <td><%= expense.user.name %></td>
  <td><%= taka(expense.cost) %></td>
  <td><%= expense.category.name %></td>
  <td style="text-align: center;">

    <% if can? :approve, expense %>
      <% if expense.approved? %>
        <%= link_to approve_expense_path(expense), class: "undo_link", method: :put, remote: true, data: {confirm: 'Are you sure?'} do %>
          <i class="fa fa-undo" title="Undo"></i>
        <% end %>
        |
      <% else %>
        <%= link_to approve_expense_path(expense), class: "approve_link", method: :put, remote: true, data: {confirm: 'Are you sure to Approve?'} do %>
          <i class="fa fa-check" title="Approve"></i>
        <% end %>
        |
      <% end %>
    <% end %>

    <% if can? :reject, expense %>
      <%= link_to reject_expense_path(expense), class: "reject_link", method: :put, remote: true, data: {confirm: 'Are you sure to Reject?'} do %>
        <i class="fa fa-ban" title="Reject"></i>
      <% end %>
      |
    <% end %>

    <% if can? :read, expense %>
      <%= link_to expense_path(expense), class: "show_link" do %>
        <i class="fa fa-eye" title="Details"></i>
      <% end %>
    <% end %>

    <% if can? :update, expense %>|
      <%= link_to edit_expense_path(expense), class: "edit_link" do %>
        <i class="fa fa-edit" title="Edit"></i>
      <% end %>
    <% end %>

    <% if can? :destroy, expense %>
      |<%= link_to expense_path(expense), class: "destroy_link", method: :delete, remote: true, data: {confirm: 'Are you sure?'} do %>
        <i class="fa fa-trash" title="Drop"></i>
      <% end %>
    <% end %>

  </td>
</tr>
    <% end %>
  </table>
</div>

    </div>
  </div>

консоль:

[Violation] 'click' handler took 1601ms
VM284:12 3
rails-ujs.js:164 [Violation] 'click' handler took 1658ms
VM284:12 2
VM289:12 1
rails-ujs.js:164 [Violation] 'click' handler took 1043ms
VM284:12 0
VM289:12 1
VM295:12 0