title: Delete HTML table row dynamically using javascript with row index with link
body: <p>I wanted to dynamically add/delete table rows in HTML. I know there are quite a lot of questions in this forum with similar query. My doubt is to make the delete action applicable for each of the rows. For this, I was using the table index. </p>
  
  <pre><code>//Link
  var cell7 = row.insertCell(6);
  var element7 = document.createElement("a");
  var text = document.createTextNode("Delete");
  element7.appendChild(text);
  element7.setAttribute("href","javascript:deleterow("+rowcount+")");
  element7.name="reqlink[]";
  cell7.appendChild(element7);    
  </code></pre>
  
  <p>Here rowcount is the index of the currently added row. So, while adding the row, I define the delete action as well. So, there will be a delete link for each of the row. However, the problem is the index varies dynamically. So, this solution will not really work. </p>
  
  <p>Please can you help? I dont want to use the check box as defined by one of the solution. </p>
  
  <p>The delete row function is scripted as follows:</p>
  
  <pre><code>function deleterow(index){
      alert('working' + index);
      table.deleteRow(index);
  }
  </code></pre>
  
  <p><strong>######### Tried this ###########</strong></p>
  
  <pre><code>//Link
  var cell7 = row.insertCell(6);
  var element7 = document.createElement("a");
  var text = document.createTextNode("Delete");
  element7.appendChild(text);
  element7.setAttribute("href","javascript:deleterow(this); return false");
  element7.name="reqlink[]";
  cell7.appendChild(element7);
  </code></pre>
  
  <p>The "this" points to window and not the table row.. </p>