I'm having a bit of trouble when removing table rows using DOM javascript. My code is this:
Code: Select all
function removeFromWell(obj)
{
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
}Does anyone know how to get around this?
If it's relevant, this is the function that adds a new row to the table I'm trying to remove rows from.
Code: Select all
function moveToWell(obj)
{
//get values to transfer
var entryName = obj.parentNode.parentNode.cells[0].innerHTML;
var entryValue = obj.parentNode.parentNode.cells[1].innerHTML;
//create row
rowNode = document.createElement('tr');
//create remove cell
removeNode = document.createElement('td');
removeNode.innerHTML = "<img src = 'images/cancel.png' onClick = 'removeFromWell(this);' />";
rowNode.appendChild(removeNode);
//create name cell
nameNode = document.createElement('td');
nameNode.innerHTML = entryName;
rowNode.appendChild(nameNode);
//create value cell
valueNode = document.createElement('td');
valueNode.innerHTML = entryValue
rowNode.appendChild(valueNode);
//add row to table (if tBodies.length > 0, we're in IE)
if(document.getElementById('well').tBodies.length > 0)
document.getElementById('well').tBodies[0].appendChild(rowNode);
else
document.getElementById('well').appendChild(rowNode);
}