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

Question

我无法引用要删除的item（row）作为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>