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!

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

Simple Javascript Help!!!

Status
Not open for further replies.

cash23523

Programmer
Apr 12, 2007
4
These seems like and easy solution but I can't seem to find the right answer. How can you delete <div> tags within html using the onclick command from an image or button in javascript?

Here's what I am doing. When the user clicks on a hyperlinked word within the main text of the document in a web page there is a right hand panel that displays the word and the correlating definition. Each time the user clicks another word the new definition appears below the old definition and so on. For each definition I am dynamically creating a <div></div> tag where the word, definition, and formatting appear bewteen the tags. The div gets its ID from the word so I can call it again later to remove it. For each div I add a small image within it that is a red close button. So the user can click on that single definition and close it essentially closing the div. That way there are not several word definitions running down the right hand margin of the page. I hope that makes sense. I thought it would be easier if I explained what I was doing.

I have been using this simple code which is called when the user clicks on the small close image/button.

function closeDiv(strWord) {
var divNum = strWord;
var sr = document.getElementById(strWord);
sr.innerHTML = "";
}

It works but it doesn't delete or remove the div tag. And when the user clicks on a new word, the definition shows up below the old blank div. Eventually you get a bunch of blank new lines where the old div html use to be. Instead of making the html blank I just need to delete or remove the div altogether. Can this be done?

Thanks
 
> sr.innerHTML = "";
You learn the wrong stuff.
[tt] sr.parentNode.removeChild(sr);[/tt]
 
As tsuji says... or, alternatively, target the actual div (maybe give it an ID that is based on the strWord Id that you pass in) and keep using your innerHTML concept.

It's actually faster to use innerHTML than it is to use the w3c dom manipulation methods in many scenarios - either way is not wrong.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
>It's actually faster to use innerHTML than it is to use the w3c dom manipulation methods in many scenarios
Only if you use it right. If you use .outerHTML than it is; but people would jump on me. In any case, use innerHTML is defective _in this case_ (read carefully), if a control of same id is dynamically created multiple time.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top