<table>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @items.each do |item| %>
      <tr id="<%= item.id %>">
        <td><%= item.name %></td>
        <td><%= link_to 'Show', item %></td>
        <td><%= link_to 'Edit', edit_item_path(item) %></td>
        <td class='destroy'>Delete</td>
      </tr>
    <% end %>
  </tbody>
</table>

document.addEventListener("DOMContentLoaded", function(event) {
  const elements = document.getElementsByClassName('destroy');

  for(var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function() {
      if(confirm('Are you sure you want to delete item #' + this.parentElement.id)) {
        $.ajax({
          url: '/items/' + this.parentElement.id,
          type: 'DELETE',
          success: function(r) {

          }
        });
      };
    });
  };
});