altering contents inside iframe and remove unwanted elements

Question

I have a div

<div id="container">
<iframe id="survey" src="somepage"></iframe>
</div>

Now the page loads inside the iframe

I want to remove all the other items except a div inside the iframe

$("#container").html($("#survey .requiredDiv").html())

But this is not working

Is it possible to do such thing? What should be done?

Answer 1

Remember: The src of iframe should also have to be in the same domain. This is due to security reasons.

Yet you can use load/html such way:

$("#container").html(function(){
    // There could be multiple target elements, i guess you should loop and return the html
    var htm = '';
    $("#survey").contents().find(".requiredDiv").each(function(){
       htm += this;  
    });
    return htm;
});

using .load() :

$("#container").load($("#survey").contents().find(".requiredDiv"));