Question

I am using JS to append array data to a table.

I am trying to add a button that removes the appended data, and puts its own data in instead. I can get the data to be added, but I cant get the data removed.

I have tried these with no luck –

.children().last().remove();

&

           .removeChild() ;

I have a fiddle but I cant get the original data remove when new added (button now works! -thanks) – http://jsfiddle.net/2waZ2/37/
What code do I add so when the new line from the array is added the old data is removed?

Code to append on load:

var row =  document.createElement('tr');
row.innerHTML = displayArrayAsTable(QR4, 24, 25);
document.getElementById('mytable').appendChild( row ) ; 

Button code to add data:

function addNewRow() {
var row =  document.createElement('tr');
row.innerHTML = displayArrayAsTable(QR4L, 24, 25);
 document.getElementById('mytable').appendChild( row ) ;
}

Answer 1

http://jsfiddle.net/2waZ2/47/

Removing the 1st child row:

var table = document.getElementById('mytable');
table.removeChild(table.children[1])