I'm building a web page which lets the user add and remove rows of data entry fields to a table. As part of this I need to be able to add a delete button to each new row as it appears and set the onclick event for it to call the function I have which removes rows. I can't work out how to set the onclick event for a newly created item though. In the code below the second last line fails. What am I doing wrong?


var tbl = document.getElementById("formTable");
var row = tbl.insertRow(tbl.rows.length);
cell = row.insertCell(1);
cell.setAttribute("width","10%");
var buttonVal = document.createElement("input");
buttonVal.setAttribute("type", "image");
buttonVal.setAttribute("id", "delbutton" + (numrows+1));
buttonVal.setAttribute("name", "delbutton");
buttonVal.src = 'skull_6.png';
buttonVal.setAction("onclick", "removeFormItem(this);");
cell.appendChild(buttonVal);