How to hide a frame if div content is empty

How to hide a frame if div content is empty

I have 3 html pages. main.html, page1.html and page2.html. I am displaying page1.html and page2.html in main.html using following code.

    <html>

 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="myjs.js"></script> </head> <iframe id="page_1" src="page1.html"></iframe> <iframe id="page_2" src="page2.html"></iframe> </html>

page1.html code

        <html>

 <body> <table id="resultDetails"> <th>Result Details</th> <tr> <td>Row 1</td> <div id="r1"> <p> R1 data</p> </div> </tr> <tr> <td>Row 2</td> <div id="r2"> </div> </tr> </table> </body> </html>

And Page2.html code

    <html>

 <body> <div id="myDiv"> <p> Testing.... </p> </div> </body> </html>

My JavaScript myjs.js

     $ ( window ). on ( 'load' , function () {

 $('#page_1').contents().bind('click','tr', function () { $('#page_2').contents().find('#myDiv').html($('#page_1').contents().find('#r1').html()) }); });

On clicking on Row 1 of page1, the content of div id = "r1" will be displayed in page2. This works with no issues.

Issue: When there is no data available for specific row (say div id= "r2"), then i want to hide the frame of page2. How we can achieve this?

Any thoughts