如何从带有日期id的数组中删除，然后单击

Question

这是我的代码。

const submitButton = document.getElementById("submit-button");
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(删除行(，然后从数组中删除。

我尝试了很多方法，但写行的编号都不起作用。

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: '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();
}