The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript JS Add/Remove Row in Table Reply To: JS Add/Remove Row in Table


Check out this pen I made:

//Define your elements
  var table = document.getElementById('theTable'),  
// your parent element you are adding content to
      rows = table.querySelectorAll('tr'),
//initial rows for counting
      rowCount = rows.length,
//how many rows exist
      addedRow = document.createElement('tr'),
//create the new row
      addButton = document.getElementById('add'),
      removeButton = document.getElementById('remove');
//basic buttons for example

  function addRow(){
    var thisRow = addedRow.cloneNode(true);
//clone your created row
    thisRow.setAttribute('class','.pt-entry-' + rowCount);
//set the class to be class + the row count (will increment) 
    rowCount += 1;

    thisRow.innerHTML = '<td>row</td>';
//adding whatever, not necessary
//puts the row in to your parent


  function removeRow(){

    var items = table.querySelectorAll('tr');
//get the new list of rows

if (rowCount > 1){
    table.removeChild(items[rowCount - 1]);
//remove the last item
    rowCount -= 1;


addButton.addEventListener('click', function(e){



  removeButton.addEventListener('click', function(e){



Since you’re only adding one element at a time, this is probably the way to do it. I didn’t look it over too much for optimisations because they would most likely be very small ones that really wouldn’t affect your code.

Note that if you were adding multiple items in to the dom at once, you would want to create a document fragment that you applied all of your added nodes to, and then apply the fragment to the page.


edit: added a check to make sure it’s not removing the last row