Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Removing elements

Status
Not open for further replies.
GezH

GezH

Programmer
Aug 7, 2002
68
Hello. I create a javascript table as follows:

<body id="bodyNode"> // my body in html page

<table id="tableObj" /> // reference to the table in html page

// my javascript
var tableObj = document.createElement("table");
var tbodyObj = document.createElement("tbody");
// append lots of table data here...
// link the table to the html elements...
tableObj.appendChild(tbodyObj);
bodyNode.appendChild(tableObj);

This all works fine. But, I call my function several times. Each time a new table is appended to the bodyNode, with the existing table still there, rather than a new table being created from scratch. How do I ensure that the bodyNode object is cleared of the existing table before it creates a new one?

Many thanks for any help.
 
Sort by date Sort by votes
[tt]//start by removal of the specific (fixed) id: tableObj
var otable=document.getElementById("tableObj");
if (otable) {
otable.parentNode.removeChild(otable);
}
//followed by creating the table (your script), but I don't see you assign the id, you must assign it
var tableObj = document.createElement("table");
[blue]tableObj.id="tableObj";[/blue]
var tbodyObj = document.createElement("tbody");
// append lots of table data here...
// link the table to the html elements...
tableObj.appendChild(tbodyObj);
bodyNode.appendChild(tableObj);
//etc etc...
[/tt]
 
Upvote 0 Downvote
Thanks tsuji, that works perfectly for me.

I didn't actually assign the id before. I'm not much of a js coder, as you can tell. I assumed that the id would have been "table", from the createElement function? Can the element not be reference by "table" then, rather than "tableObj"?

 
Upvote 0 Downvote
>I assumed that the id would have been "table", from the createElement function?
No, it wouldn't.
>Can the element not be reference by "table" then, rather than "tableObj"?
It can... But, after all, it is just a name, a string within the eligible set. Why use a common name and asking for trouble? Choose one which is not colliding with any. If tableObj seems common enough, you are free to choose a more exotic one. No collision, eligible and fixed are the three guiding principles of choosing it.
 
Upvote 0 Downvote
Id is, IMO, always the way to go when referencing objects with javascript (as opposed to name).

Notice the IMO.

[monkey][snake] <.
 
Upvote 0 Downvote
Do take note that while Dan's suggestion of setting the innerHTML of the body to an empty string will be very fast (modifying the innerHTML of an element is almost always faster than using DOM methods), you will want to be aware of the power of that declaration. Setting the innerHTML of the <body> tag will essentially wipe out everything on the page, not just your table.

So, if you have more content on the page besides the table, you will likely want to use the DOM methods to selectively remove the table instead of doing a clean sweep by setting the innerHTML to a blank string [thumbsup2]

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
uncle_rico_thumb.jpg
 
Upvote 0 Downvote
So, if you have more content on the page besides the table, you will likely want to use the DOM methods to selectively remove the table instead of doing a clean sweep by setting the innerHTML to a blank string
Click to expand...

You could however, make a div that ONLY contains the table and use innerHTML on the div to clean it out everytime, that way you know that you are only removing the table.



[monkey][snake] <.
 
Upvote 0 Downvote
Or you could set the innerHTML of the table to a blank string and rebuild it's rows.

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
uncle_rico_thumb.jpg
 
Upvote 0 Downvote
Or you could set the innerHTML of the table to a blank string and rebuild it's rows.
Click to expand...

Doesn't work on a table directly. InnerHTML is readonly on tables. DOM method would be needed.

[monkey][snake] <.
 
Upvote 0 Downvote
Duh.... I knew that. You corrected me for once! Don't get used to it. [smile]

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
uncle_rico_thumb.jpg
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Making elements visible during an onChange() event
Replies
3
Views
185
vacunita
vacunita
LyndonOHRC
  • Locked
  • Question
How do I Hide/Show options elements by class
Replies
1
Views
96
ChrisHirst
ChrisHirst
litton1
  • Locked
  • Question
Find dynamic elements 1
Replies
5
Views
153
litton1
litton1
cmayo
  • Locked
  • Question
Group &amp; collapse elements based on field value
Replies
5
Views
144
cmayo
cmayo
1DMF
  • Locked
  • Question
JQuery UI ToolTip - leaving artefacts when elements are clicked 1
2
Replies
29
Views
434
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top