This code is supposed to able me to add lines to a table that holds values of name, date, and amount of money and, at the end of each line also create a button that allows me to delete that specific line.
const nameEl = document.getElementById("name-el")
const dateEl = document.getElementById("date-el")
const amountEl = document.getElementById("amount-el")
const tableEl = document.getElementById("table-el")
const buttonEl = document.getElementById("button-el")
let myExpense = []
buttonEl.addEventListener("click", function() {
myExpense.push({
name: nameEl.value,
date: dateEl.value,
amount: amountEl.value
})
renderTable()
})
function renderTable() {
for (let i = 0; i < myExpense.length; i++) {
tableEl.innerHTML += `
<tr>
<th>${myExpense[i].name}</th>
<th>${myExpense[i].date}</th>
<th>${myExpense[i].amount}</tr>
</th>
<button id="deleteThis">X</button>
`
}
}
function deleteThis(index) {
myExpense.splice(index, 1);
renderTable();
}/* no css */<!-- no HTML -->I want this button created by JS to delete itself and its respective line of the table, but it's not working for some reason.