How to delete content loaded in an iFrame

Coming back to asp/javascript after several years absence, I have coded myself into a bit of a corner.

Page.asp1 dynamically inserts some server-generated HTML into a live page by creating an iFrame, appending it to Page1.asp and setting its source (src=) to another asp page.

This works fine, but once there, I can find no way to hide or delete the inserted html, when the viewer selects some option for which the new content does not apply.  

Page1.asp before inserting new content:
 Before loading new content
Page1.asp after loading new content:
 After loading new content
I want the inserted stuff to go away when the viewer clicks "HIDE".

Code in Page1.asp which calls for new content:

function ShowTickets(tktDiv, tID)
{
        var newReq = document.createElement("iframe");
        newReq.style.display="";
        document.body.appendChild(newReq);
      newReq.name = "req"+tktDiv.id;
      newReq.src = "edittkts.asp?tID="+tID+"&targetid="+tktDiv.id;
}
note: tktDiv is a <div id="tktDiv"></dev> in Page1.asp's html.

Code in Page2.asp (edittkts.asp) which assembles the content and plugs it into tktDiv's innerHTML (just the plug-in and a little body code shown here):

<script>
window.onload = function(){
      parent.document.getElementById('<%= Request.QueryString("targetid") %>').innerHTML = window.document.body.innerHTML;
}
</script>
</head>
<tr>
<td height="156" colspan="2" align="center" valign="top"><span class="Arial11"><span onMouseover="ddrivetip(' 1. Choose how many of this Ticket Type are available.<br>2.Define the Ticket Type, i.e. Adult, Child etc.<br>3. Input the cost per person.<br>4. Input the overall amount to be available for online purchase, (this will allow holding tickets aside for walk-ons). The setting Max People, found below, describes overall passenger capacity', 300), this.style.cursor='default';" onMouseout="hideddrivetip()">
...

Question:  What is the best way to have clicking "HIDE" remove the inserted content?  Whatever it is needs to also fire when a different trip type is selected.  I already feel like an idiot, so no snarky remarks needed.
LVL 1
Don SmithAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

imantasCommented:
Why don't you just remove the iframe (removeChild) when you don't need it anymore and reload it with different URL when it's contents needs to be changed?
0
Don SmithAuthor Commented:
Thanks for the suggestion, imantas.  I have tried that before.  Most recent (of several) stab:

function ShowTickets(tktDiv, tID)
{
        var newReq = document.createElement("iframe");
        newReq.style.display="";
      newReq.id = "newReq";
        document.body.appendChild(newReq);
      newReq.name = "req"+tktDiv.id;
      newReq.src = "edittkts.asp?tID="+tID+"&targetid="+tktDiv.id;
}
function HideTickets()
{
      document.body.removeChild(document.getElementById("newReq"));
}

I just can't figure out the argument to removeChild, and suspect it's due to my shallow knowledge of the DOM.  Can you give me an example?
}
0
imantasCommented:
It looks correct. removeChild takes the element to be removed as an argument. It has to be called on the parent of the element:
element.parentNode.removeChild(element)

Open in new window

but this looks ok in your code so should work. Maybe you have ID "newReq" duplicated? Try "alert()"ing in HideTickets to make sure document.getElementById("newReq") returns the right element and that it's parentNode is document.body.

Also, instead of
newReq.id = "newReq";

Open in new window

try using
newReq.setAttribute("id", "newReq");

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Don SmithAuthor Commented:
Very interesting, imantas.  What I didn't mention before is that when the new content is inserted, it shows up at the bottom of the page, as well as where I want it to.  Normally I set the display to none because of this.

Now, your suggested code DOES remove the iFrame at the bottom of the page!  Maybe some of my earlier attempts were doing this without my noticing it.  However, it is still displayed in the <dev> where the called asp page sticks the innerHTML.  So I guess now my problem advances to getting it of that area too.  Suggestion?
0
imantasCommented:
Actually, I'm now confused and don't get what the problem is. I got lost between all the elements you have mentioned, so a visual material would be helpful.
0
Don SmithAuthor Commented:
Problem solved.  After your help, just needed to set the <div>'s innerHTML back to "".  Thanks a lot for your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.