title: Hide content inside iframe?
body: <p>Here is my situation.</p>
  
  <p>I have a file called iframe.html. which has code in below,</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="eng"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"/&gt;
          &lt;title&gt;Pluign Development&lt;/title&gt;
  
          &lt;script src="js/jquery-1.11.0.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;iframe id="abc" src="test.html"&gt;&lt;/iframe&gt;
          &lt;div id="sub"&gt;click&lt;/div&gt;
      &lt;/body&gt;
  
      &lt;script src="js/script-22.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and i have test.html file. which has code in below,</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="eng"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"/&gt;
          &lt;title&gt;Pluign Development&lt;/title&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div id="red"&gt;prasanga karunanayake &lt;/div&gt;
      &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>here is js code what i have tried,</p>
  
  <pre><code>(function($){ 
  
      var fire = {
          init:function(){
              $('#sub')
              .on('click', function(){
                  $('#red', parent.document).css('display','none');
              });
          }
      };
      fire.init();
  
  }(jQuery));
  </code></pre>
  
  <p>Here is my situation.</p>
  
  <p>i need to hide <code>&lt;div id="red"&gt;prasanga karunanayake &lt;/div&gt;</code> which is in the test.html file. if i click <code>&lt;div id="sub"&gt;click&lt;/div&gt;</code>  then hide html content which is in the test.html.</p>
  
  <p>I am pretty much confused,Your help is appreciated.</p>