Удалить элемент в форме и сохраняются в базе данных

Question

У меня есть кнопка удаления в моей форме, которая выглядит следующим образом:

%td 
    %button.btn.btn-default{class: "delete-btn", "data-id" =>booking.id} Delete 

Как я должен написать свой JavaScript, чтобы сделать его удалить строку в таблице, когда Delete нажата кнопка?

В принципе, как я могу изменить это в моем application.js файл

$(".delete-btn").on("click", function(e) { 
     var bkId = $(e.target).data("id"); 
     //line to delete it from my form and the db 
    }); 

Раньше я имел в моем HTML форме выполнить удаление

'Delete', booking, :method => :delete, :data => { :confirm => 'Are you sure?' } 

Пожалуйста, может кто-то показать мне как эквивалент .js/ajax?

Я разработал этот код до сих пор (он выполняет, но я постоянно получаю мое сообщение об ошибке):

$(".delete-btn").on("click", function(e) { 
     var bkId = $(e.target).data("id"); 
     $.ajax("/bookings", { 
      data: { 
       booking: { 
        id: bkId 
       } 
      }, 
      method: "DELETE" 

     }).done(function(resp){ 
      window.location = location.href; 
     }).fail(function(resp){ 
      console.log("Error. Unable to delete"); 
      alert("Error. Unable to delete this booking"); 
     }) 
    }); 

Answer 1

Я нашел простой для достижения этой цели:

%td= link_to 'Delete', booking, :method => :delete, class: "btn btn-danger" 

Тем не менее, я m ищет более сложную задачу, которая включает в себя модификацию моего application.js (см. выше), чтобы развить мое понимание того, как работает связь между передним и задним концом.