CODEWITHSUNDEEP
javascriptdom
nww04
nww04

Reputation: 1857

How to delete a created element in JavaScript?

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!

Upvotes: 6

Views: 34741

Answers (3)

elclanrs
elclanrs

Reputation: 94101

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

Upvotes: 4

Sudarshan Tanwar
Sudarshan Tanwar

Reputation: 3607

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

Upvotes: 3

Bergi
Bergi

Reputation: 664385

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.

Upvotes: 1

Related Questions