Question

Currently I have a link that when clicked generates a iframe contained in a DIV. This DIV contains a link that when clicked hides it.

However I don’t want to just hide it, I want the iframe ‘removed’ so its not running in the background.

I understand that .remove does this but then I cannot generate it again.

This is the code currently:

$(document).ready(function() {
    $("#overlay").hide();
});

$("#ShowSlideshow").live('click', function() {
    $("#overlay").show();
    $('#slideshow').html('<iframe border="0" frameborder="0" width="100%" height="100%" src="index.html"></iframe>').show()
});

$("#HideSlideshow").live('click', function() {
    $("#overlay").hide();
    $("#slideshow").hide();
});

Here are the DIVS:

<div id="overlay"><a href="#" id="HideSlideshow">Close Slideshow</a>
<div id="slideshow"></div>
</div>

Answer 1

You don’t want to remove the actual #slideshow, you just want to remove the iframe inside the #slideshow. Like so:

$("#HideSlideshow").live('click', function() {
    $("#overlay").hide();
    $("#slideshow iframe").remove();
});