如何点击段落时仅保留当前元素selected类，移除其他段落的同类名？

需求说明 #

• 点击段落元素时，仅保留当前点击段落的selected类
• 其余所有段落需移除selected类

原有实现问题 #

原有代码仅在点击时给目标元素添加selected类，未做全局选中状态清除，会导致多个段落同时处于选中状态。

完整实现代码 #

HTML 代码 #

<div>
  <p>服务</p>
  <p>关于我们</p>
  <p>联系我们</p>
</div>

CSS 代码 #

p {
  height: 30px;
  background: red;
  margin: 8px 0;
  cursor: pointer;
}
p.selected {
  height: 100px;
}

JavaScript 代码 #

// 获取段落父容器
const paragraphWrap = document.getElementsByTagName("div")[0];
// 获取所有p标签元素
const paragraphList = paragraphWrap.querySelectorAll("p");

// 遍历给每个p绑定点击事件
paragraphList.forEach(paragraph => {
  paragraph.addEventListener("click", () => {
    // 清除所有p的选中类
    paragraphList.forEach(item => item.classList.remove("selected"));
    // 给当前点击的p添加选中类
    paragraph.classList.add("selected");
  });
});

逻辑说明 #

每次触发点击事件时，先统一清空所有段落的选中状态，再给当前点击的段落设置选中，可保证全局永远只有一个选中的段落。

内容的提问来源于stack exchange，提问作者God of all wars