为何Tampermonkey脚本中parent().remove()无法移除YouTube按钮？

核心问题分析 #

1. case2无效的直接原因：你用了parent()方法，这是jQuery的专属语法，原生JavaScript里没有这个方法，代码直接报错导致移除操作根本没执行。原生JS获取父元素应该用parentNode，但就算改成x[i].parentNode.remove()，也只会移除SVG图标本身——毕竟<path>的父级是<svg>，<svg>的父级才是按钮的外层点击容器，得往上找多层才能删掉整个按钮。

2. 脚本执行时机问题：YouTube是动态渲染页面的，你的脚本可能在视频页的按钮还没加载出来时就运行了，导致找不到对应的<path>元素，自然没效果。

3. case1的问题：移除<path>只是删掉了按钮里的图标，按钮的外层点击容器还在，所以看起来按钮“还存在”。

修正后的脚本方案 #

下面是调整后的Tampermonkey脚本，解决了上述所有问题：

// ==UserScript==
// @name         移除YouTube多余按钮(感谢/分享)
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  通过SVG的path属性定位并移除YouTube视频页的感谢、分享按钮
// @author       你
// @match        https://www.youtube.com/watch*
// @run-at       document-idle
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 把要移除的按钮对应的path的d属性值填在这里
    const targetDValues = [
        "M15-verylongstring", // 替换成你找到的Share按钮d值
        "这里填Thanks按钮的d值" // 替换成感谢按钮的d值
    ];

    function removeButtons() {
        // 只找yt-icon下的path元素，缩小范围避免误操作
        const paths = document.querySelectorAll('path.style-scope.yt-icon');
        paths.forEach(path => {
            const currentD = path.getAttribute('d');
            // 匹配目标d值
            if (targetDValues.includes(currentD)) {
                // 找到最近的按钮外层容器（YouTube新版布局里通常是yt-button-shape类的元素）
                const button = path.closest('yt-button-shape, .yt-spec-button-shape-next');
                if (button) button.remove();
            }
        });
    }

    // 页面加载完成后先执行一次
    removeButtons();

    // 监听DOM变化，处理YouTube动态加载的内容（比如切换视频后按钮重新渲染）
    const observer = new MutationObserver(() => removeButtons());
    observer.observe(document.body, { childList: true, subtree: true });
})();

关键调整说明 #

• 用document.querySelectorAll替代getElementsByTagName，精准定位yt-icon下的path，避免误操作其他页面元素。
• 用closest()方法直接找到按钮的外层容器，不用手动一层层找父元素，更适配YouTube频繁变动的DOM结构。
• 添加MutationObserver监听DOM动态变化，解决切换视频后按钮重新加载的问题。
• 设置@run-at document-idle确保脚本在页面完全加载后执行，保证能找到目标元素。

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