Как удалить из массива, с идентификатором даты, и нажать?

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… я хочу найти идентификатор строки (удалить строку), а затем удалить из массива. Я пробовал много способов, но это не работает. Не получается записать номер строки, потому что я не знаю, как найти его идентификатор в массиве.

Answer 1

Установить динамическое нажатие кнопки для вызова функции и передачи ей идентификатора могилы

`<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: 'name', email: 'email', address: 'adress', product: 'product', 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();
}