Hi,

I have an HTML table with a button to clone the first row which works fine.

Each row contains a button that is meant to delete the current row (child).
My problem here is that I can't find a way to tell these buttons which is the current row as I don't how to assign incrementing IDs or numbers to each row.
I hope someone can help me with this.

My JS:
Code:
<script type="text/javascript">
 $(document).ready(function()
 {  
  $('#submitForm').on('click', function()
  {
   validateNU(); 
  });
 });
 var cloneRow = (function()
 {
  var rowCount = parseInt(document.getElementById('rowID').value, 10);
 
  var table = document.getElementById("outputTable3");
  var row = document.getElementById("rowOrig");
  var clone = row.cloneNode(true);
  
  table.appendChild(clone);
  
  rowCount = isNaN(rowCount) ? 0 : rowCount;
  rowCount++;
  document.getElementById('rowID').value = rowCount;
 });
 function delRow(r)
 {
  var rowCount = document.getElementById('rowID').value;
  
  var table = document.getElementById('outputTable3');
  
  if (rowCount == 1)
  {
   bootbox.dialog("<p>This is the only row - you cannot delete it. :-)</p>",
   {
    "label": "OK",
    "class": "btn-primary font-bold",
    "data-bind": "click: cancel"
   }, 
   {
    "header": "FRiEND - Message"
   });
  }
  else
  {
   table.removeChild(table.children[2])
  }
 }
</script>
Thanks, Mike