遍历数组移除WordPress多余样式表时JS报错的问题排查

错误原因 #

你用for...in遍历数组时，变量i拿到的是数组的索引值（比如0、1），而非你定义的CSS选择器字符串。调用document.querySelector(i)时相当于传入了'0'，这不是合法的CSS选择器，因此触发了报错。

修正后的代码 #

推荐用forEach遍历数组，写法简洁不易出错，还能轻松扩展要移除的资源：

const assets = [
  "link[href*='/wp-content/plugins/js_composer/assets/css/js_composer.min.css']",
  "link[href*='/wp-includes/css/dist/block-library/style.min.css']",
  "script[src*='需要移除的脚本路径片段']" // 直接添加脚本选择器即可
];

// 确保DOM加载完成后执行，避免找不到元素
document.addEventListener('DOMContentLoaded', () => {
  assets.forEach(selector => {
    const element = document.querySelector(selector);
    if (element) {
      element.disabled = true;
      element.remove();
      console.log(`已移除资源：${selector}`);
    } else {
      console.warn(`未匹配到目标资源：${selector}`);
    }
  });
});

额外注意事项 #

• 必须等待DOM加载完成后执行代码，否则可能因元素未渲染导致找不到目标资源。
• 添加if (element)判断可以避免单个资源不存在时，报错中断整个移除流程。
• 移除JS脚本时，只需把选择器改成script[src*='脚本路径的特征片段']即可，逻辑和移除CSS完全一致。

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