Hide a div on embed tag

Question

I have an embed tag on a site with an external source. I'd like to hide a div on the external source that I'd like to hide.

The embed code is this:

<embed src="https://www.site.com" width='100%' height='1000px'/>

And the div has a class and inline style

<div class="button" style="display:block !important;">

Is it possible to hide with javascript or CSS? I know that I can't do it with an iframe for security issues, is it the same with embed tag?

Or do I have other ways to do that?

Answer 1

First, define ID for both control as:

     <embed id="embedID" src="https://www.site.com" width='100%' height='1000px'/>
     <div id="divID" class="button" style="display:block !important;">

After that write below code:

     $("#embedID #divID").remove();

Answer 2

Give the button an ID. For example: button1

<div class="button1" style="display:block !important;">

$("#button1").remove();

or

$("#button1").hide();

if you want to define multiple ID's at once, you can use:

$("#button1 #button2").remove();

or

$("#button1 #button2").hide();

Both should work!

For external links like you mentioned in the comments:

Using JQuery you should be able to exactly that with the load-function. Here is a small example to get a container with id "container" on a page called Test.html:

$('#contentDiv').load('/Test.hmtl #container');

You can visit the JQuery documentation here for more info

Answer 3

Try this:

   document.getElementsByClassName('button')[0].style.visibility='hidden';

This may help you.