如何用JavaScript在点击按钮时批量移除P1、P2类元素的active类

实现代码 #

你可以直接通过选择器匹配所有符合要求的元素批量移除active类，示例如下：

// 替换为你实际按钮的选择器，比如按钮id是clearActiveBtn就填对应id
const clearBtn = document.getElementById('你的按钮ID');

clearBtn.addEventListener('click', function () {
  // 直接选中所有属于P1/P2类且带有active类的元素
  const targetElements = document.querySelectorAll('.P1.active, .P2.active');
  // 遍历逐个移除active类
  targetElements.forEach(element => {
    element.classList.remove('active');
  });
});

可选方案（使用你已定义的P1、P2变量） #

如果你要复用已经声明的P1、P2元素集合，也可以用如下写法，classList.remove在元素没有对应类名时不会报错，无需额外判断：

const clearBtn = document.getElementById('你的按钮ID');

clearBtn.addEventListener('click', function () {
  // 遍历所有P1元素移除active类
  for (const el of P1) {
    el.classList.remove('active');
  }
  // 遍历所有P2元素移除active类
  for (const el of P2) {
    el.classList.remove('active');
  }
});

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