Jquery close div on

Question

私のコードでは、ユーザがDIVをクリックしたときにまたは<script>タグを使用して広告を配置しようとしていますが、DIVがそれに広告を含むそのDIVを自動的に削除します。 DIVに画像をロードするとコードが100％正常に機能しますが、広告コンテンツを読み込むまたは<script>タグを入力すると除外されません。どうしてか分かりません？ DIV機能のクリックを自動的に検出して削除する機能はありますか？ここで

はここhttps://jsfiddle.net/infohassan/uvzjj9h4/2/

ライブ実施例である私のHTML

$(document).ready(function() { 
 
    $('.custom_closebtn').click(function() { 
 
    $('.custom_ads_placement').remove(); 
 
    }); 
 
}); 
 
$(document).ready(function() { 
 
    $('.custom_adContent').click(function(e) { 
 
    $('.custom_ads_placement').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="custom_ads_placement" style="z-index:10000;"> 
 
    <div class="custom_closebtn">Close Ad</div> 
 
    <div class="custom_adContent" style="z-index:12000;"> 
 
    <iframe src="http://exampledomain.com/ad.php" width="330" height="400" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" >Your Browser Do not Support Iframe</iframe> 
 
    </div> 
 
</div>

Answer 1

の更新である私は（ただし.remove、正しくコードを動作させることができました）すべてのブラウザでjqueryが完全にサポートされているわけではありません。参照：https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove 別の戦略を検討するとよいでしょう。私は間違っていないよ場合は、閉じるにはIFRAMEをクリックしをリッスンし、その中にJavaScriptを使用してiFrameを持って

$(document).ready(function() { 

    $('.custom_adContent').click(function(e) { 
    document.getElementsByClassName('custom_adContent')[0].innerHTML=""; 
    }); 

    $('.custom_closebtn').click(function() { 

    document.getElementsByClassName('custom_ads_placement')[0].innerHTML=""; 
    }); 
}); 

Answer 2

であるあなたのimgはあなたのdivをクリックしたときにあなたがしているすべての​​のdivをカバーしています実際にimg &をdivでクリックしていない場合は、このセレクタを使用してください： .custom_ads_placement img

これは、あなたが実装する必要がスクリプトです：

$(document).ready(function(){ 
     $('.custom_closebtn').on('click',function() { 
    $('.custom_ads_placement').hide(); 

     }); 
     $('.custom_ads_placement img').on('click',function() { 
    $('.custom_ads_placement').hide(); 

     }); 
    }); 

、ここではあなたのIMAGE JSFIDDLE/iFRAME JSFIDDLE

Answer 3

：ここ

が更新答えです。

あなたはIFRAMEから親のDOMを変更することはできません。

はこれでいくつかの問題があります。ブラウザはセキュリティ上の理由からこれをサポートしていません。

あなたはwindow.postMessageを使用し、そうのような親にメッセージを送ることができ、クロスオリジンの通信を可能にするには、次の

top.postMessage('close_iframe', '*') 

しかしこれは、親ウィンドウがそう

window.addEventListener('message', e => { 
    if(e.data == 'close_iframe') { 
     // Delete/hide the add from here 
    } 
}) 

のようなメッセージを聞いていることが必要です

あなたの他の（そしておそらく最後の）オプションは、ライブラリを作成してユーザに追加させることです。このライブラリは、iframeと関連するすべてのコンポーネントを作成します。この方法で、ページに埋め込まれ、すべてのJavaScriptが作成されます。アウトiframeのide。

Answer 4

あなたが親

postion:relative 

にスタイルを追加し、IFRAMEを削除するだけで、コンテナ

<div style="position:absolute;top:0;left:0;width:100%;height:100%"></div> 

でそれをカバーしたい場合は、クリックするためのiframeが発生した作品 JSFiddle

をクリックしてくださいは、子ウィンドウで行われるので、スクロールのようなiframeでアクションを実行できます。