I have a node application and inside the index.html there is the following code that adds the header, the footer, etc in every page of my application:
<body ng-app="myApp" class="paper-theme">
<div id="wrapper" class="container-fluid" ng-controller="MainCtrl">
<div ng-include="'views/header.html'"> </div>
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<div ng-include="'views/sidebar.html'"></div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main p-5">
<div ng-include="'views/breadcrumbs.html'"></div>
<div class="ng-view"></div>
</div>
</div>
</div>
<!-- /. WRAPPER -->
<div ng-include="'views/footer.html'"> </div>
</body>
On a specific page (training.html) I added an iframe to show the lab selected:
<iframe id="iframe0" name="myIframe" frameborder="5" width="1500" height="1500"></iframe>
And in the controller (trainingCtrl.js), inside a function, I have the following code to show the selected lab:
...
for (var i=0; i<d.children.length; i++) {
lab=d.children[i].name;
$('#iframe'+i).attr('src', 'http://localhost:18181/lab/use/NS/'+lab);
...
};
When loading the iframe, the lab is loaded but with the same header of the main page. So I want to delete it. I tried various solutions like:
$("#iFrameId").contents().find("#yourDiv").empty();
or
$('#iFrameId').contents().find('.entry-footer').remove();
but none of them work.
This is what my page looks like and what I would like to delete.