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 patibility 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!

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 patibility 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!

• javascript
• dom

• 1 Try to alert(name) in hideTextBox(). It should actually be "Author2" since you're increasing the counter at the end of the other function. – Dek Dekku Commented May 23, 2013 at 7:18
• ^Great! I think it seems to work now, But I can see it on source. On the HTML Markup??? I am going to process this on a separate php form so can PHP still detect it anyway? – nww04 Commented May 23, 2013 at 7:23

3 Answers 3

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'));

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

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.

If you change the DOM, you of course do not change the HTML source markup. Only the DOM inspector will show you the changes.

var name    = 'Author'+ctr;
var cTarget = document.getElementById( name );
alert( cTarget ); // this one return null? Why? I have created id="Author1"

Yes, you created it using your showTextBox function. But that did also increment the ctr to 2, so that you now are looking for Author2 which obviously does not exist. So put a ctr--; before it and it should work.