如何通过DOM在指定页面移除header中的progress-indicator元素

你之前代码的问题 #

• 第一段代码：about-page是.container的类，不是.main-page-container的类，所以new1.classList.contains('about-page')永远为false，不会执行移除操作。
• 第二段代码：querySelector前缺了document.，而且querySelector返回单个元素，没有length属性，判断条件永远不成立；就算用querySelectorAll，length > 1的逻辑也不对——只要页面存在目标容器就应该移除，不是数量大于1。

正确的实现代码 #

要在指定的两个页面移除progress-indicator，可以先检查页面独有的容器类是否存在，再执行移除操作，同时要确保DOM加载完成后再执行代码：

document.addEventListener('DOMContentLoaded', function() {
  // 替换成你需要处理的两个页面的独有容器类，比如about-page和另一个类似contact-page的类
  const targetPageClasses = ['about-page', 'contact-page'];
  
  // 检查当前页面是否是目标页面
  const isTargetPage = targetPageClasses.some(className => {
    return document.querySelector(`.container.${className}`) !== null;
  });

  if (isTargetPage) {
    const progressIndicator = document.querySelector('.progress-indicator');
    // 确保元素存在再移除，避免报错
    if (progressIndicator) {
      progressIndicator.remove();
    }
  }
});

补充说明 #

• 如果你的页面独有类是直接加在body标签上的，也可以直接检查body的类，逻辑更简单：

  document.addEventListener('DOMContentLoaded', function() {
    const body = document.body;
    if (body.classList.contains('about-page') || body.classList.contains('contact-page')) {
      const progressIndicator = document.querySelector('.progress-indicator');
      progressIndicator?.remove(); // 可选链操作符简化存在性判断
    }
  });
  

• 把代码放在页面底部（</body>标签前），也可以不用DOMContentLoaded事件，因为此时DOM已经加载完成。

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