JQuery - 删除页面加载时的动态内容?

时间:2016-06-29 11:30:44

标签: jquery

如何使用jQuery删除页面加载事件中动态生成的文本?
我试过谷歌但没有发现任何有用的东西。实际上我正在使用第三方JS库,它在html页面上插入一些我需要删除的文本。

我尝试了这段代码,但它删除了已经在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翻译器添加了我需要的选择框,但在其下方添加了一些我想删除的“Powered by”文本。虽然,可以用css隐藏文本,但我想用jQuery删除它。

2 个答案:

答案 0 :(得分:1)

<强> 更新

另一个解决方案是:

$(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>

旧答案

您可以使用DOMNodeInserted mutation event检查您的某个div下是否存在您要查找的文字:

$(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>

答案 1 :(得分:0)

在页面加载事件或window加载事件中,由于您的DOM尚未就绪,因此无效,意味着div文本Powered by不存在,并且您的code在此之前正在执行,您必须将代码放在DOM就绪函数下面,该函数位于生成此Powered By的行下方。

注意检查 brsower控制台是否为errors,如果没有,则可以使用

<强> LIKE

$(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>

然后它会起作用。