hello, im guessing this question is quite trivial. i have a page setup as follows.

MAIN PAGE

<html>
  <head>
  </head>
  <body>
    <div id='innerlogin'><iframe src='INNER PAGE'></iframe></div>
  </body>
</html>

INNER PAGE

<html>
  <head>
    <script type="text/javascript">
      function RemoveDiv(){
      d = parent.document.body;
      d_nested = parent.document.getElementById("innerlogin");
      throwaway = d.removeChild(d_nested);
      }
    </script>
   </head>
   <body>
     ........
   </body>
</html>

now i am using asp.net and after all has been said and done with the INNER PAGE i would like to fire off the javascript 'RemoveDiv' to get rid of the div and the inner page. i realise this could be done using asp.net and no javascript at all. but my page is already heavily consistent of controls and i wish to remove the strain of the server as much as possible and allow the client to take care of presentation.

the problem is this does not work as you may have guessed so can anybody spot what ive done wrong ? or am i doing it completely wrong

The way you are trying to acquire the parent element is wrong. Do something like this:

<html>
<head>
    <script>
    function remove()
    {
        var parent = document.getElementsByTagName('form')[0];
        var elem = document.getElementById('id');
        var old = (elem.parentNode).removeChild(elem);
    }
    </script>
</head>
<body>
<form name="frm">
    <iframe id="id" name="name" src="d.html"></iframe>
    <br />
    <input type="button" value="RemoveFrame" onclick="remove();" />
</form>
</body>
</html>

i understand that this will work when you have an element on the page that contains the IFRAME but what im looking to achieve is to remove the div containing the iframe from within the iframe itself so where you have specified...

<iframe id="id" name="name" src="d.html"></iframe>

'd.html' would contain the button to close the div which is holding the iframe it is currently in. hah ive just even confused myself. maybe this will help.

-- MAINPAGE.html
---- DIV
------ IFRAME
-------- d.html
---------- onclick delete DIV ^^^

thanks for the help

Instead of removing it, why not just hide it.

.stealth {visibility: visible;}

Then, at the point where you want something to disappear, change its visibility attribute to:

hidden - if it should still take up the space.

collapse - if it should disappear from the page format too.

Midimagic, you are getting confused between the 'display' attribute and 'visibility' attribute of CSS. Visibility attribute never removes the element from the page, it just hides it. It still influences the page layout and takes up space.

The difference between 'hidden' and 'collapse' is that 'collapse' works on normal as well as table elements, whereas 'hidden' works only for normal elements.

Fungus, I gave you a working sample code which nearly does what you want to do. If you want further help you have to at least try out something and paste it here and tell me what is not working.

This article has been dead for over six months. Start a new discussion instead.