HTML - Remove Iframe Display

I created an HTML page (main page) with an iframe so when I click the button the iframe will display covering the whole page. But I am having a problem on how to remove it whenever

Solution 1:

You could wrap the iframe in a div and add the back button and the iframe in that div.

Add the click listener to the back button and remove the Iframe on button click.

Example:

function back() {
    document.getElementById("iframe").remove();
}

.back-button {
            position: absolute;
            right: 2px;
        }

<div style="width: 100%; height: 100%">
    <button class="back-button" onclick="back()">Back</button>
    <iframe id="iframe" src="http://google.com" height="100%" width="100%">
    
    </iframe>
</div>

Solution 2:

Since the source of your frame is on the same domain (even site) as the containing page, you should be able to reach from frame's code into the parent.

window.parent.document.querySelector('iframe').style.display = 'none';