Question

this following code works in adding new rows in HTMl:

function addRow() 
{
  var row = document.getElementById('row');
  var newRow = row.cloneNode(true);
  row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}

How can I add a new function to remove a row? I tried searching but couldn’t find the answer.

Answer 1

To remove a DOM element in Javascript you use the removeChild API. This requires you to have the DOM element of both the container and the item you want to remove.

In this example if you wanted to remove the row with id row you would do the following

var row = document.getElementById('row');
row.parentNode.removeChild(row);

Documentation: https://developer.mozilla.org/En/DOM/Node.removeChild

Note: In this particular example it looks like you are adding multiple DOM nodes with the same id value. Having duplicate id values is not allowed and will cause you many problems down the road. Every id value needs to be unique.

One way to accomplish this would be to use a counter to append a unique suffix to every row you add.

var rowCounter = 0;
function addRow() 
{
  rowCounter++;
  var row = document.getElementById('row');
  var newRow = row.cloneNode(true);
  newRow.id = 'new_row_' + rowCounter;
  row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}