How to delete a created element in JavaScript?

Question

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.

Adding an input element and appending it on the table works fine for me.

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.

here is my code

   <script>
   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
   }                
   </script>

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.

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.

EDIT In case you need the actual form here it is

    <form enctype="multipart/form-data" action="process/" method="POST" />
    <h3>Book Upload</h3>

    <table border="2" id='tbhold'>
    <tr>
        <td>Title</td>
        <td><input type="text" id="book_title" name="book_title" /></td>
    </tr>

    <tr>
        <td>Author</td>
        <td><input type="text" id="book_author" name="book_author" /></td>
    </tr>

    <tr id="bef">
      <td colspan="2">
        <a href="javascript:showTextBox()">add author</a> 
        <a href="javascript:hideTextBox()">remove</a>
      </td>                     
  </tr>
  </table>
  </form>

Thank you very much!

Answer 1

Try this function:

function removeElements(elements){
    for(var i = 0; i < elements.length; i++){
        elements[i].parentNode.removeChild(elements[i]);
    }
}

Then you can do this:

removeElements(document.querySelectorAll('#tbhold tr'));

Answer 2

function hideTextBox(){
    var name = "Author" + (ctr - 1);
    var pTarget = document.getElementById('tbhold');
    var cTarget = document.getElementById(name);
    var tr = cTarget.parentNode.parentNode;

    tr.parentNode.removeChild(tr);
    ctr = ctr - 1;
}   

Here is a demo