如何使用Tampermonkey通过ID移除网页元素？

原代码的问题 #

• if(true)完全多余，对逻辑没有任何作用
• 大概率是脚本执行时机太早，DOM还没加载完成，导致document.getElementById('user-list-toggle')返回null，后续调用parentNode直接报错
• 用parentNode.removeChild()是旧写法，现在有更简洁的API可用

解决方案 #

方案一：确保DOM加载完成后执行（适合静态元素）

通过Tampermonkey配置指定脚本运行时机，再检查元素是否存在后删除：

// ==UserScript==
// @name         移除指定ID元素
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  通过ID移除网页目标元素
// @author       你
// @match        替换成你要操作的网页URL，比如https://xxx.com/*
// @run-at       document-idle
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const targetEl = document.getElementById('user-list-toggle');
    // 元素存在才执行删除
    if (targetEl) {
        targetEl.remove(); // 直接调用remove方法，无需找父节点
    }
})();

方案二：监听DOM变化（适合动态加载的元素）

如果目标元素是AJAX或其他方式动态生成的，用MutationObserver监听DOM变化，元素出现后立即删除：

// ==UserScript==
// @name         动态移除指定ID元素
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  监听DOM，移除动态加载的目标元素
// @author       你
// @match        替换成你要操作的网页URL，比如https://xxx.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            // 检查是否有新增节点
            if (mutation.addedNodes.length) {
                const targetEl = document.getElementById('user-list-toggle');
                if (targetEl) {
                    targetEl.remove();
                    observer.disconnect(); // 删除后停止监听，节省资源
                }
            }
        });
    });
    // 监听整个body的子节点变化，包括后代元素
    observer.observe(document.body, { childList: true, subtree: true });
})();

注意事项 #

• 必须把@match后面的内容替换成你实际要操作的网页URL，否则脚本不会生效
• 静态元素用方案一足够，动态加载的元素优先用方案二
• 永远先检查元素是否存在再执行删除，避免出现Cannot read properties of null的错误

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