如何在Apiary中移除GitHub Fork按钮？CSS隐藏方法无效

我明白你之前尝试用CSS隐藏这个按钮但没成功的困扰——大概率是选择器优先级不够，或者按钮是页面动态加载的，导致你的CSS没来得及生效。这里给你几个可行的解决方案：

• 优化CSS选择器，提升优先级
  试试用更精确的选择器，或者加上!important来强制覆盖页面原有样式：

  body .row.tocColumnTool.forkOnGitHub {
    display: none !important;
  }
  

  有时候页面内的内联样式或者更高优先级的CSS规则会覆盖你的设置，这种方法能帮你突破优先级限制。

• 用JavaScript直接移除元素（更彻底）
  如果按钮是动态加载的（比如页面渲染后才生成），CSS可能无法提前捕获到它。这时候用JS来定位并移除元素会更可靠：

  // 等待页面核心内容加载完成
  document.addEventListener('DOMContentLoaded', () => {
    const forkButton = document.querySelector('.row.tocColumnTool.forkOnGitHub');
    if (forkButton) {
      forkButton.remove(); // 直接删除元素，比隐藏更彻底
    }
  });
  

• 针对动态生成元素的监听方案
  如果按钮是后续通过脚本动态插入到页面的，上面的代码可能还是抓不到它。这时候可以用MutationObserver来监听DOM变化，确保元素出现后立刻移除：

  const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => {
      const forkButton = document.querySelector('.row.tocColumnTool.forkOnGitHub');
      if (forkButton) {
        forkButton.remove();
        observer.disconnect(); // 找到元素后停止监听，避免资源浪费
      }
    });
  });
  
  // 监听整个页面的DOM变化
  observer.observe(document.body, { childList: true, subtree: true });
  

另外，你也可以先检查下Apiary的项目设置页面，看看官方有没有提供关闭GitHub Fork按钮的选项——不过目前Apiary好像没有这个官方配置，所以前端的方法还是最直接的。

内容的提问来源于stack exchange，提问作者T.J.