title: How to delete table row using Javascript
body: <p>I have created new rows using Javascript <code>function addRow(id)</code>, but I can't delete it. When I click the remove button, nothing happens. What am I doing wrong?
  I'm grateful for any advice.</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
     somethingElse
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td colspan="5"&gt;
          &lt;script type="text/javascript"&gt;
             var inputCount = 0;
  
              function addRow(id) {
                  //set row number
                  inputCount++;
                  var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
                  var row = document.createElement("TR");
  
                  var td1 = document.createElement("TD");
                  var td2 = document.createElement("TD");
                  var td3 = document.createElement("TD");
                  var td4 = document.createElement("TD");
                  var td5 = document.createElement("TD");
  
                  var t1 = document.createElement('div');
                  var t2 = document.createElement('div');
                  var t3 = document.createElement('div');
                  var t4 = document.createElement('div');
                  var t5 = document.createElement('div');
  
                  t1.innerHTML = "Name of school: ";
                  t2.innerHTML = "&lt;input type='text' Width='180px' name='items_" + inputCount + "'&gt;";
                  t3.innerHTML = "Title aquired: ";
                  t4.innerHTML = "&lt;input type='text' Width='180px' name='value_" + inputCount + "'&gt;";
                  t5.innerHTML = "&lt;input type='Button' class='Button' onclick='deleteLine(this)' value='Remove'&gt;";
  
                  td1.appendChild(t1)
                  td2.appendChild(t2)
                  td3.appendChild(t3)
                  td4.appendChild(t4)
                  td5.appendChild(t5)
  
                  row.appendChild(td1);
                  row.appendChild(td2);
                  row.appendChild(td3);
                  row.appendChild(td4);
                  row.appendChild(td5);
  
                  tbody.appendChild(row);
              }
  
              function deleteLine(object) {
                  var table = document.getElementsByTagName("myTable")[0];
                  var tBody = table.getElementsByTagName("tbody")[0];
                  var rows = tBody.getElementsByTagName("tr");
  
                  while (object.tagName != 'TR') {
                      object = object.parentNode;
                  }
                  var row = rows[object.rowIndex];
  
                  tBody.removeChild(row);
              }
          &lt;/script&gt;
          &lt;table id="myTable"&gt;
              &lt;tr&gt;
                  &lt;td align=right&gt;
                      Name of school:
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:TextBox ID="TextBox1" runat="server" Width="180px"&gt;&lt;/asp:TextBox&gt;
                  &lt;/td&gt;
                  &lt;td align=right&gt;
                      Title aquired:
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:TextBox ID="TextBox2" runat="server" Width="180px"&gt;&lt;/asp:TextBox&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;a href="javascript:addRow('myTable')"&gt;Add more education&lt;/a&gt;
                  &lt;/td&gt;                                        
              &lt;/tr&gt;
          &lt;/table&gt;                                
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
     somethingElse
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>