从数据库填充的动态创建的表中删除一行，从数据库中删除该项目

Question

我无法在delete方法的ajax调用中将要删除的项目（行）作为url引用。

    let retrieve = () => {
      $.ajax({
          url: "/api/contributors",
          method: "GET",
          contentType: "application/x-www-form-urlencoded",
          headers: {
          "Content-Type": "application/json"
        }    
      }).then(function(response) {
            let result = response;
             console.log(result);
             info.push(result);
             console.log(info);
             console.log(info[0]);
             // console.log(info[0][0]._id)
             let records = info[0].map(r => {
                 return r;
              })
                console.log(records);

        $("#data").append( "<table class='table table-dark'>" +
               '<thead class="thead thead-dark">' +
               '<tr>'+
               '<th scope="col">' + 'ID' + '</th>' +
               '<th scope="col">' + 'Title' + '</th>' +
               '<th scope="col">' + 'Name' + '</th>' +
               '<th scope="col">' + 'Address' + '</th>' +
               '<th scope="col">' + 'Phone Number' + '</th>' +
               '<th scope="col">' + 'Email' + '</th>' +
               '<th scope="col">' + 'Date' + '</th>' +
                  // '<th scope="col">' + 'Rate' + '</th>' +
               '</tr>' +
               '</thead>' )

              records.forEach(record => {
               $(".table").append("<tbody>" +          
                "<tr>" +
                "<td>" + record._id  + "</td>" +
                "<td>" + record.title  + "</td>" +
                "<td>" + record.name  + "</td>" +
                "<td>" + record.address  + "</td>" +
                "<td>" + record.phoneNumber  + "</td>" +
                "<td>" + record.email  + "</td>" +
                "<td>" + record.creation_date  + "</td>" +
                "<td>" +
                "<button id='' class='btn btn-warning btn-sm update'>" +
                "Update" +
                "</button>" +
                "</td>" +          
                "<td>" +
                "<button id='' class='btn btn-danger btn-sm delete'>" +
                "Delete" +
                "</button>" +
                "</td>" +
                "</tr>" +
                "</tbody>" +          
                "</table>"
                 );
              })

           });
         }

下面是我遇到的困难。以上所有内容均按预期工作。

      let del = (event) => {
      event.stopPropagation();
      let listItemData = 
      $(this).parent("td").parent("tr").parent("tbody").data("customer");

      console.log(listItemData);
      let id = listItemData;
      // let id = $(this).data("id");
      console.log(id);
      $.ajax({
            url: "/api/contributors/" + id,
            method: "DELETE"
           }).then(retrieve)
        }

         $(document).on("click", "button.delete", del);

我希望表中的项目被删除，但是listItemData出现为未定义状态。因此，该网址显示为“ / api / contributors / undefined”，从而导致错误。

Answer 1

尝试使用event.currentTarget：

$(event.currentTarget).parent("tbody").data("customer");

您可以消除其他parent个调用，因为parent向上遍历DOM以查找选择字符串的第一个匹配项。

Answer 2

您可以将click事件委托给表。

(function () {
  var table = document.querySelector('table');
  // delete the click event to the table
  table.addEventListener('click', handleRowAction);
  
  // fake api call
  loadData()
    .then(renderRows);
  
  function loadData() {
    return new Promise(function(resolve) {
      setTimeout(function () {
         resolve([{
            id: 1,
            name: 'John'
         }, {
            id: 2,
            name: 'Jane'
         }, {
            id: 3,
            name: 'Jane'
         }]);        
      }, 1000);
    })
  }
  
  // renders data as table rows
  function renderRows(data) {
    table.tBodies[0].innerHTML = (
      data.map(function (r) {
        return (
          '<tr>'+ 
            '<td>'+ r.id + '</td>' +
            '<td>'+ r.name + '</td>' +
            '<td><button class="del-button">DEL</button></td>' +
          '</tr>'
        )
      })
      .join('')
    );
  }
  
  // click handler
  function handleRowAction(e) {
    var target = e.target;
    // if the click node is not the delete button, then exit
    if (!target.matches('.del-button')) {
      return;
    }
    // I believe, you can replace the line below for
    // table.deleteRow(target.closest('tr').rowIndex), since they are
    // equivalent
    table.deleteRow(target.parentNode.parentNode.rowIndex);
  }
  
  
})();

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <table class="table">
      <thead>
        <tr>
          <td>id</td>
          <td>name</td>
          <td></td>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</body>
</html>