title: How to delete a particular row in a dynamically created html rows using Javascript DOM?
body: <p>Here am trying to add a html rows by clicking on the add button and delete the added rows on clicking on the delete button.</p>
  
  <p>Its working fine with adding rows as expected. But the problem is the delete function deletes the last row of the table instead of deleting that corresponding row.</p>
  
  <p>As there is delete button in every row, only that corresponding row should be deleted when the delete button is clicked.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/nKkhW/3/" rel="nofollow">jsfiddle</a> which demonstrates the situation better.</p>
  
  <p>if the fiddle above failed to load as it does, Please refer the code below.</p>
  
  <p>Thanks in advance</p>
  
  <h2>JAVSCRIPT</h2>
  
  <pre><code>//function to add a row 
  function insSpec()
      {
  
  
      rl=document.getElementById("insSpecc").rows.length;
      var a=document.getElementById("insSpecc").insertRow(rl);
      var h=a.insertCell(0);
      var f=a.insertCell(1);
      var m=a.insertCell(2);
      var n=a.insertCell(3);
      h.innerHTML='&lt;div class="separator"&gt;&lt;input type="text" name="client_prod[]"  class="separator" id="competitor_prod'+rl+'" style="width:150px"  &gt;';
      f.innerHTML='&lt;input type="text" name="client_nrx[]" id="client_nrx'+rl+'" size="5"  /&gt;';
      m.innerHTML='&lt;input type="text" name="client_rrx[]"  id="client_rrx'+rl+'" size="5"  /&gt;';
      n.innerHTML='&lt;button   class="del_img" onClick="delSpec('+rl+')"&gt;Delete&lt;/button&gt;&lt;/div&gt;';
  
      }
  //function to delete a row
  function delSpec(rl)
      {   
      r=document.getElementById("insSpecc").rows.length;
      if(r!=2)
      {
          document.getElementById("insSpecc").deleteRow(r-1)
      }
  
  
      }
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;table id="insSpecc" width="100%;"&gt;
      &lt;div class="separator"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;span&gt;Product&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span&gt;NRX(Qty)&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span&gt;RRX(Qty)&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/div&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="text" id="client_prod" name="client_prod[]" style="width:150px;" class="validate[required] text-input"&gt;&lt;/td&gt;
          &lt;td&gt;
          &lt;input type="text" id="client_nrx" name="client_nrx[]" size="5" class="validate[required] text-input"&gt;
  
          &lt;/td&gt;
              &lt;td&gt;
          &lt;input type="text" id="client_rrx" name="client_rrx[]" size="5"&gt;
  
          &lt;/td&gt;
            &lt;td&gt;
          &lt;button id="add_img"   id='insSpecimg' style='display:block;' onClick="insSpec()" align="center"&gt;Add&lt;/button&gt;
          &lt;/td&gt;   
      &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>