Member Avatar for Fungus1487

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

  • 3 Contributors
  • 5 Replies
  • 306 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for ~s.o.s~

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>
Member Avatar for Fungus1487

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

Member Avatar for MidiMagic

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.

Member Avatar for ~s.o.s~

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.

Member Avatar for MidiMagic

I'm not confused. I just find it easier to hide an element, as opposed to totally removing it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.