title: Delete dynamically created row : removechild
body: <p>HTML :    </p>
  
  <pre><code>&lt;body style='background-color: white;'&gt;
  
  &lt;div&gt;
      &lt;div id='dependent'&gt;
          &lt;input type="button" value="Add" id='abtn' onclick='addfunction()' /&gt;
          &lt;input type="button" value="Delete" id='dbtn' onclick='deletefunction(this)' /&gt;
          &lt;input type="button" value="Total No. of rows" id='Button2' onclick='total()'/&gt;      &lt;br /&gt;
  
      &lt;/div&gt;
      &lt;div&gt;
          &lt;input type="button" value="Submit" id='subid' onclick='smt()' /&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript : </p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
  
  
  
  
      function addfunction() {
  
          rcount++;
          t++;
  
          tr1 = document.createElement('tr');
          tr1.id = "t" + t;
  
          tx1 = document.createElement('p');
          text1 = document.createTextNode(t);
          tx1.appendChild(text1);
  
          td1 = document.createElement('td');
          td1.id = "da" + t;
  
          c1 = document.createElement('input');
          c1.type = "checkbox";
          c1.id = "a" + t;
  
          td2 = document.createElement('td');
          td2.id = "db" + t;
          c2 = document.createElement('input');
          c2.type = "checkbox";
          c2.id = "b" + t;
  
          td3 = document.createElement('td');
          td3.id = "dc" + t;
          c3 = document.createElement('input');
          c3.type = "checkbox";
          c3.id = "c" + t;
  
  
          dl1 = document.createElement('input');
          dl1.type = "button";
          dl1.id = "dl" + t;
          dl1.onclick = deletefunction; //Delete button for each row
  
          br1 = document.createElement('br');
  
          document.getElementById("dependent").appendChild(tr1);
          document.getElementById(tr1.id).appendChild(tx1);
          document.getElementById(tr1.id).appendChild(td1);
          document.getElementById(td1.id).appendChild(c1);
          document.getElementById(tr1.id).appendChild(td2);
          document.getElementById(td2.id).appendChild(c2);
          document.getElementById(tr1.id).appendChild(td3);
          document.getElementById(td3.id).appendChild(c3);
          document.getElementById(tr1.id).appendChild(dl1);
          document.getElementById(tr1.id).appendChild(br1);
  
  
  
  //Delete Function
      function deletefunction() {
          alert('tr' + rcount);
          document.getElementById('tr' + rcount).removeNode(true);
  
      }
  
  
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How do i delete dynamically created row(or 'tr') using javascript?</p>
  
  <p>I tried deleting it in two ways,</p>
  
  <ol>
  <li>Separate delete button which will delete the last row. </li>
  <li>Delete button on each row, to delete that particular row.</li>
  </ol>
  
  <p>I tried various things but none works, i'm getting errors  as <code>" Unable to get value of the property 'removeNode': object is null or undefined".</code></p>