2016-06-29 12 views
1

jQueryを使用してページのロードイベントで動的に生成されたテキストを削除するにはどうすればよいですか?
私はgoogleを試みましたが、有用なものは何も見つかりませんでした。実際に私は削除する必要があるHTMLページにいくつかのテキストを挿入するサードパーティのJSライブラリを使用しています。JQuery - ページの読み込み時に動的コンテンツを削除しますか?

私はこのコードを試しましたが、動的ページではなくHTMLページにある定数テキストを削除します。

$('div:contains("Powered by")').remove(); 

編集:

ここでは、完全なコードです。

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="js/jquery-2.1.4.min.js"></script> 
    </head> 
    <body> 
    <div id="translate"> 
    <div id="google_translate_element"></div><script type="text/javascript"> 
    function googleTranslateElementInit() { 
    new google.translate.TranslateElement({pageLanguage: 'en',includedLanguages: 'en,es,fr,it'}, 'google_translate_element'); 
} 
    </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 
    </div> 
    </body> 
    </html> 

注:、Googleの翻訳私は必要な選択ボックスが追加されますが、私は削除する、その下の「を搭載」いくつかのテキストを追加します。しかし、それはCSSでテキストを非表示にすることは可能ですが、私はそれをjQueryで削除したいと思います。ページロードイベントまたはそれが動作しませんwindow Loadイベントで

+0

あなたがフィドルを作成することができます:あなたのdivの1が存在するの下にあなたが探しているテキストがかどうかを確認するためにDOMNodeInserted mutation eventを使用することができます。確認できるように –

+0

このコードは、 のような間隔に置いてください。var interval_of_function = setInterval(function(){$( 'Powered by ")))remove();} – esertbas

+0

はこの質問のための最良の解決策ですか?私はそれがより多くのリソースを持つかもしれないので、私はないと思う。 @esertbas –

答えて

0

あなたDOMはまだ準備ができていないので、テキストPowered bydiv意味がない、とあなたのcodeは、その前に実行されている、あなたはでコードを配置する必要がありますDOMこのPowered Byが生成された行の下にready関数があります。それはそれは動作します

$(document).ready(function(){ 
 
$("div:contains('Powered By')").remove(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div>Powered By</div>

LIKE

に動作します。存在しない場合は

NOTEerrorsのためにあなたのbrsowerコンソールを確認してください。

+0

私はすでにこのコードをDOMに入れていますが、動作していません。 –

+0

'Powered By'を一重引用符で囲んで、スニペットもチェックしてください。 ブラウザのコンソールにエラーがないか確認してください。エラーがあるかもしれません。 –

+0

私の質問をもう一度見てください。ダイナミックに生成されたテキストに関するもので、既にページ上にある静的テキストではありません。 –

1

UPDATE

別の解決策は、次のとおりです。

$(window).on('load', function(e) { 
    $('div.skiptranslate.goog-te-gadget').hide(); 
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 


<div id="translate"> 
    <div id="google_translate_element">This is a simple snippet</div> 
    <script type="text/javascript"> 
    function googleTranslateElementInit() { 
     new google.translate.TranslateElement({pageLanguage: 'en',includedLanguages: 'en,es,fr,it'}, 'google_translate_element'); 
    } 
</script> 
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 

旧回答

$(document).on('DOMNodeInserted', 'div:contains("Powered By")', function(e) { 
 
    console.log('element div conatining "Powered By" removed!'); 
 
    $(this).remove(); 
 
}); 
 
$(function() { 
 
    $('#addText').on('click', function(e) { 
 
    $('div').append('Powered By'); 
 
    }); 
 
    $('#addDiv').on('click', function(e) { 
 
    $('body').before('<div>..................</div>'); 
 
    }); 
 
});
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 

 
<div>Powered By</div> 
 
<div>Powered By</div> 
 
<div>Powered By</div> 
 
<button id="addText">Add text</button> 
 
<button id="addDiv">Add div</button>

+0

は魅力的に働いた。私はあなたのコードを$(document)に置くように変更した唯一の事は.ready(function(){$(document).on( 'DOMNodeInserted'、 'div:contains( "Powered By")、function(e) console.log( 'Powered By "が削除されました!); $(this).remove(); });}); –

+0

あなたの更新されたコードは選択ボックスも隠します。 –

関連する問題