Hide an element inside an <object> tag with JavaScript

Question

I want to hide an element inside an <object> tag , the element is <div class="footer">...</div> I tried this code but still not working, please help me

<div> 
     <object id="t" type="text/html" data="https://www.example.com/" width="100%" height="600px" style="overflow:auto;">
     </object>
</div>

and this is my javascript code

<script>
  $(document).ready(function(){
       var t = document.querySelector("#t");
       var htmlDocument = t.contentDocument;
       htmlDocument.getElementsByClassName("footer")[0].style.visibility='hidden';
  });

</script>

Answer 1

Thank you I fixed it (hide the footer of example.com inside my website) by using an iframe and css following this code :

<div style="overflow:hidden;">
<iframe src="https://www.example.com/" name="iframe_all" frameborder="0"  style="width: 100%; height: 650px; margin-bottom: -120px;" ></iframe>
</div>