Add & Remove Cells from Cloned Table Rows

Question

I am trying to create a table that I can add & remove rows from as needed. The table itself is created on the fly with PHP and I have no way of knowing how many cells will be in each table row. So far I have been able to add rows successfully but have been stymied as to how to remove a specific row when the "X" is pressed.

I figure, if I can pass a number to the "remove" function, that can be used to determine what row to delete. I have been attempting to remove the final "td" from the cloned data and replace it with a "td" that contains the correct function argument.

Nothing I've tried has worked thus far. Any suggestions?

HTML

<table class='group'>
  <tr class='group_row_0'>
    <td>Thing 1</td>
    <td>Thing 2</td>
    <td>Thing 3</td>
    <td>Thing 4</td>
    <td>
      <a href='#' class='group_remove' onclick='javascript:removeGroupField(0);'>X</a> <!-- The "0" here needs to be replaced with the new row # -->
    </td>
  </tr>
</table>

<a href='#' class='group_add' onclick='javascript:addGroupField();'>+ Add Row</a>

Javascript:

var row_index = 1;

function addGroupField(){
  var last_row = row_index-1;

  var rowData = $('.group_row_'+last_row).clone();
  rowData.attr('class','group_row_'+row_index);

  $('.group').append(rowData);

  row_index++;
}

Answer 1

You should try to attach your handlers with Javascript properly, not with inline handlers. Just add a single handler to the table, and when the X is clicked, remove the row by navigating upwards from the clicked button to the tr to remove:

 $('table.group').on('click', '.group_remove', function() { const tr = this.parentElement.parentElement; tr.remove(); }); $('.add').on('click', function (){ const cloned = $('.group tr:last-child').clone(); $('.group').append(cloned); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class='group'> <tr class='group_row_0'> <td>Thing 1</td> <td>Thing 2</td> <td>Thing 3</td> <td>Thing 4</td> <td> <a href='#' class='group_remove'>X</a> </td> </tr> <tr class='group_row_1'> <td>Thing 1</td> <td>Thing 2</td> <td>Thing 3</td> <td>Thing 4</td> <td> <a href='#' class='group_remove'>X</a> </td> </tr> <tr class='group_row_2'> <td>Thing 1</td> <td>Thing 2</td> <td>Thing 3</td> <td>Thing 4</td> <td> <a href='#' class='group_remove'>X</a> </td> </tr> <tr class='group_row_3'> <td>Thing 1</td> <td>Thing 2</td> <td>Thing 3</td> <td>Thing 4</td> <td> <a href='#' class='group_remove'>X</a> </td> </tr> </table> <div class="add">add row</div>

Answer 2

It seems like you're using some jQuery so you could try this for the x's.

$(document).on('click', '.group_remove', function(){
    $(this).closest('tr').remove();
});

It works by go up the DOM tree to find the closest tr element to the element that is clicked (this is the specific group_remove class element). Then, that element, and everything inside it, is removed.

Answer 3

<?php
      echo "<table border=0 width=100%>
               <tr id='tabRow'></tr>
            </table>";
      echo "<center><button = addcell();>Add</button></center>";
 ?>

Script

function addcell() 
{
   var row           = document.getElementById("tabRow");
   var nrow          = row.cells.length;    
   var addcell       = row.insertCell(nrow);
   addcell.align     = "right";
   addcell.innerHTML = "<font color=red onclick=deletecell(this)><sup>X</sup></font>Hello World";
}

function deletecell(rmvcell)
{
   document.getElementById("tabRow").deleteCell(rmvcell.cellIndex);
}