How to delete created element in JavaScript?

Question

Hello, I have a piece of code that allows me to add an author. I have a problem, I cannot delete the created node in my table. This is the worst disappointment in my life. I could not remove it. I also noticed that every time I checked the item, I could not see the newly created item from the source. But when I look at it on Firebug, I really see it there.

Adding an input element and adding it to a table is great for me.

I am just very new to JavaScript and on this website and delete CREATED ELEMENT through .createElement where I am stuck.

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 some help. This is for my project at school. Is there any way to remove it. I created this node and I want it to be deleted when I click something.

Also, I prefer to stay with JS not with JQuery or another JStuff, and now I will ignore compatibility because it is just a sample in my dummy form. I will talk about this later.

EDIT If you need the actual form, this 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

 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

Answer 2

Try this feature:

 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 3

every time I checked an element, I could not see the newly created element from the source. But when I look at it on Firebug, I really see it there.

If you change the DOM, you certainly will not change the markup of the HTML code. 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 the showTextBox function. But that also increased the ctr value to 2 , so now you are looking for Author2 , which obviously does not exist. So put ctr--; before that, and it should work.