title: How to delete a created element in JavaScript?
body: <p>Hello I have a piece of code that allows me to add an author.
  I have a problem, I can't seem to delete the created node in my table
  This is the worst frustration in my life. I could not seem to delete it.
  I also have notice that every time I inspected the element I could not see the
  new created element from the source. But when I view it on firebug I can actually see it there.</p>
  
  <p>Adding an input element and appending it on the table works fine for me.</p>
  
  <p>I am just very new to JavaScript and to this web thingy and deleting a CREATED ELEMENT via .createElement is where I am stuck at.</p>
  
  <p>here is my code</p>
  
  <pre><code>   &lt;script&gt;
     var ctr = 1;
  
     function showTextBox() 
     {
         // is the table row I wanted to add the element before
         var target  = document.getElementById('bef');
  
         var tblr = document.createElement('tr');
         var tbld1 = document.createElement('td');
         var tbld2 = document.createElement('td');
  
         var tblin = document.createElement('input');
         tblin.name = 'Author' + ctr;
         tblin.id = 'Author' + ctr;
         tblin.placeholder = 'add another author';
  
         tbld1.appendChild( document.createTextNode('Author' + ctr ) );
  
         tbld2.appendChild( tblin );
         tblr.appendChild( tbld1 );
         tblr.appendChild( tbld2 );
  
         target.parentNode.insertBefore( tblr , target );
         ctr++;
     }
  
     function hideTextBox() 
     {
        var name    = 'Author'+ctr;
        var pTarget = document.getElementById('tbhold');
        var cTarget = document.getElementById( name ); 
        alert( cTarget ); // this one return null? Why? I have created id="Author1"
                          // viewing this code on source make the created elem to not appear
     }                
     &lt;/script&gt;
  </code></pre>
  
  <p>Am I doing something wrong? I really need help. This is for my project at school.
  Is there any way I could delete it. I created that node and I want it to be deleted when I click something.</p>
  
  <p>Also I prefer to stay with JS not with JQuery or other JStuff and I am disregarding compatibility for now because this is just a sample in my dummy form. I will deal on that later.</p>
  
  <p>EDIT
  In case you need the actual form here it is</p>
  
  <pre><code>    &lt;form enctype="multipart/form-data" action="process/" method="POST" /&gt;
      &lt;h3&gt;Book Upload&lt;/h3&gt;
  
      &lt;table border="2" id='tbhold'&gt;
      &lt;tr&gt;
          &lt;td&gt;Title&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" id="book_title" name="book_title" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;Author&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" id="book_author" name="book_author" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr id="bef"&gt;
        &lt;td colspan="2"&gt;
          &lt;a href="javascript:showTextBox()"&gt;add author&lt;/a&gt; 
          &lt;a href="javascript:hideTextBox()"&gt;remove&lt;/a&gt;
        &lt;/td&gt;                     
    &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>Thank you very much!</p>