点击anchor元素时移除grandparent类及指定grandchild元素的技术咨询

你的需求逻辑很清晰，只需要修正原代码的语法问题，调整逻辑位置并补充移除孙元素的代码即可：

修正后的完整代码 #

<a href="#" class="grandparent">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? <span class="grandchild">&#8226;</span></p>
</a>
<a href="#" class="grandparent">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? <span class="grandchild">&#8226;</span></p>
</a>
<a href="#" class="grandparent">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? <span class="grandchild">&#8226;</span></p>
</a>
<a href="#">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? </p>
</a>

<script>
const grandparents = document.querySelectorAll('a');

grandparents.forEach(elem => {
  elem.addEventListener('click', (e) => {
    // 阻止a标签默认跳转（按需选择，避免页面刷新导致操作失效）
    e.preventDefault();
    
    // 移除当前a标签的grandparent类
    elem.classList.remove('grandparent');
    
    // 检查当前a标签无grandparent类时，移除对应的孙元素
    if (!elem.classList.contains('grandparent')) {
      const grandchild = elem.querySelector('.grandchild');
      grandchild?.remove(); // 可选链操作，避免找不到元素时报错
    }
  });
});
</script>

核心调整说明 #

1. 修正语法错误：原代码中addEventListener的回调函数未闭合括号，导致代码无法正常执行。
2. 逻辑位置调整：把移除孙元素的判断逻辑放到点击事件回调内部——原代码的判断只会在页面加载时执行一次，点击后不会重新触发，必须放在点击触发的函数里才会生效。
3. 安全移除元素：用querySelector在当前a标签范围内查找.grandchild元素，配合可选链?.调用remove()，避免找不到元素时抛出错误。
4. 可选的默认行为阻止：添加e.preventDefault()避免a标签跳转页面，导致之前的DOM操作被刷新重置。

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