Each onclick
function references the variable selectedItem
. After your for
loop, that variable is set to the last item in the array. So, every button will reference that last item. Here is a demonstration.
I suggest using Javascript's parentNode
and rowIndex
to allow a button to reference its own parent row.
In my example below, rowIndex
returns the index number of the tr
that is the parentNode
for the clicked cell (td
). This index number can be used to remove a table row directly.
cell2.onclick = function () { removeRow(this.parentNode.rowIndex); };
function removeRow(x) {
document.getElementById("Table").deleteRow(x);
}