Vanilla JS移除Google翻译元素失效求助：DOM加载时序问题

我在页面中集成了Google翻译工具，想移除其中一个元素。这个元素的选择逻辑在浏览器开发者工具里能正常生效，但脚本运行时因为翻译组件加载需要时间，函数没法及时获取目标元素导致失效。我试过把移除逻辑封装成函数在页面加载时调用，还是没用。我用原生JS（Vanilla JS）开发，相关代码如下：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>

    <nav id="navbar">
      <div id="google_translate_element"></div>
    </nav>

    <!-- SCRIPTS -->
  
    <!-- Google translate -->
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  
    <!-- Main stript -->
    <script type="text/javascript" src="../scripts/main.js"></script>

  </body>
</html>

Google翻译初始化JS代码 #

// Google Translate
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}

尝试过的移除逻辑 #

直接执行的代码：

let powe = document.querySelector('#google_translate_element')
powe =  powe.querySelector('.goog-te-gadget')
powe.childNodes[1].remove()

封装后调用的代码（无效）：

function remPowered(){
  let powe = document.querySelector('#google_translate_element')
  powe =  powe.querySelector('.goog-te-gadget')
  powe.childNodes[1].remove()
}

document.onload(remPowered())

因为Google翻译组件是异步加载渲染的，页面加载完成时它的DOM元素可能还没生成，所以直接调用移除函数会失效，推荐两种可靠的解决方法：

方法1：用MutationObserver监听DOM变化 #

通过监听翻译容器的DOM变动，一旦目标元素出现就执行移除操作，精准且高效：

function remPowered() {
  const translateContainer = document.querySelector('#google_translate_element');
  if (!translateContainer) return;

  // 创建观察者实例
  const observer = new MutationObserver((mutations) => {
    const gadgetElement = translateContainer.querySelector('.goog-te-gadget');
    // 确认目标子元素存在后移除
    if (gadgetElement && gadgetElement.childNodes.length > 1) {
      gadgetElement.childNodes[1].remove();
      observer.disconnect(); // 完成后停止监听，避免不必要的性能消耗
    }
  });

  // 开始监听容器的子元素变化，包括子树
  observer.observe(translateContainer, { childList: true, subtree: true });
}

// 页面DOM结构加载完成后启动监听
document.addEventListener('DOMContentLoaded', remPowered);

方法2：在翻译初始化后轮询检查元素 #

利用定时器定期检查目标元素是否存在，一旦存在就移除并停止定时器：

function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
  
  // 每100ms检查一次，可根据实际加载速度调整间隔
  const checkTimer = setInterval(() => {
    const gadgetElement = document.querySelector('#google_translate_element .goog-te-gadget');
    if (gadgetElement && gadgetElement.childNodes.length > 1) {
      gadgetElement.childNodes[1].remove();
      clearInterval(checkTimer); // 移除元素后停止检查
    }
  }, 100);
}

另外注意：你之前写的document.onload(remPowered())存在两个问题，一是document.onload应该用addEventListener绑定，二是即使绑定正确，页面load事件触发时翻译组件的DOM可能还没渲染完成，所以依然会失效。

内容的提问来源于stack exchange，提问作者Nicholas Affonso