如何从具有日期ID的数组中删除并单击？

Question

这是我的代码。

const tBody = document.getElementById("tbody");

const nameInput = document.getElementById("inputName");
const emailInput = document.getElementById("inputEmail");
const addressInput = document.getElementById("inputAddress");
const productInput = document.getElementById("inputProduct");
const qInput = document.getElementById("inputQ");

var tomb = [
    {Id: Date.now(), name: 'name', email: 'email', address: 'adress', product: 'product', q: 1}
];

document.addEventListener('DOMContentLoaded', (event) => {
    for(let i = 0; i < tomb.length; i++){
        let newRow = document.createElement("tr");
        newRow.innerHTML =  `
                            <td>${tomb[i].name}</td>
                            <td>${tomb[i].email}</td>
                            <td>${tomb[i].address}</td>
                            <td>${tomb[i].product}</td>
                            <td>${tomb[i].q}</td>
                            <td> <button class="delete btn btn-primary">X</button> </td>`
        tBody.appendChild(newRow);
    } 
});

submitButton.addEventListener("click", function(e){
    e.preventDefault();
    var b = {
        Id: Date.now(),
        name: nameInput.value,
        email: emailInput.value,
        address: addressInput.value,
        product: productInput.value,
        q: qInput.value
    };
    tomb.push(b);

    let newRow = document.createElement("tr");
    newRow.innerHTML = `
                        <td>${b.name}</td>
                        <td>${b.email}</td>
                        <td>${b.address}</td>
                        <td>${b.product}</td>
                        <td>${b.q}</td>
                        <td> <button class="delete btn btn-primary">X</button> </td>`
    tBody.appendChild(newRow);
});

const table = document.querySelector("table");

table.addEventListener("click", function(e){
    if(e.target.classList.contains("delete")){
        e.target.parentElement.parentElement.remove();


    }
});

在table.addEventlistener中...我想找到该行的ID（删除行），然后从数组中删除。我尝试了很多方法，但是没有用。写行号是行不通的，因为我不知道如何在数组中找到他的ID。

Answer 1

动态设置按钮的onclick来调用函数并向其传递坟墓ID

`<button class="delete btn btn-primary" onclick="removeTomb(${tomb[i].Id})">X</button>`

和removeTomb功能中的>

const removeTomb=(Id)=>{
     let index=tomb.findIndex(tom => tom.Id==Id);
     tomb.splice(index,1);
}
完整代码：

const tBody = document.getElementById("tbody");

const nameInput = document.getElementById("inputName");
const emailInput = document.getElementById("inputEmail");
const addressInput = document.getElementById("inputAddress");
const productInput = document.getElementById("inputProduct");
const qInput = document.getElementById("inputQ");

var tomb = [
    {Id: Date.now(), name: 'Véninger Gréta', email: '[email protected]', address: 'Pécs Jakabhegyi út 8.', product: 'tükör', q: 1}
];

document.addEventListener('DOMContentLoaded', (event) => {
    render();
});

submitButton.addEventListener("click", function(e){
    e.preventDefault();
    var b = {
        Id: Date.now(),
        name: nameInput.value,
        email: emailInput.value,
        address: addressInput.value,
        product: productInput.value,
        q: qInput.value
    };
    tomb.push(b);
});
const render=()=>{
    tBody.innerHTML="";
    for(let i = 0; i < tomb.length; i++){
        let newRow = document.createElement("tr");
        newRow.innerHTML =  `
                            <td>${tomb[i].name}</td>
                            <td>${tomb[i].email}</td>
                            <td>${tomb[i].address}</td>
                            <td>${tomb[i].product}</td>
                            <td>${tomb[i].q}</td>
                            <td> <button class="delete btn btn-primary" onclick="removeTomb(${tomb[i].Id})">X</button> </td>`
        tBody.appendChild(newRow);
    } 
}
const removeTomb=(Id)=>{
     let index=tomb.findIndex(tom => tom.Id==Id);
     tomb.splice(index,1);
     render();
}