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:

functionback() {
    document.getElementById("iframe").remove();
}

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

<divstyle="width: 100%; height: 100%"><buttonclass="back-button"onclick="back()">Back</button><iframeid="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';