如何使用JavaScript移除指定div类名下a标签的href属性

你可以通过CSS选择器直接匹配对应类名下的a标签，无需给a标签单独加id，具体操作如下：

方案1：直接移除href属性 #

该方案会直接删除a标签的href属性，完全清除跳转属性：

// 等待DOM加载完成后执行，避免选不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 匹配所有类为removetag的div下的所有a标签
  const linkList = document.querySelectorAll('.removetag a');
  // 遍历移除href属性
  linkList.forEach(function(link) {
    link.removeAttribute('href');
  });
});

方案2：仅禁用跳转，保留href属性 #

如果需要保留href属性的值，只是不想让用户点击跳转，可以用阻止默认事件的方式实现：

document.addEventListener('DOMContentLoaded', function() {
  const linkList = document.querySelectorAll('.removetag a');
  linkList.forEach(function(link) {
    // 阻止点击跳转行为
    link.addEventListener('click', function(e) {
      e.preventDefault();
    });
    // 可选：添加不可点击的样式提示
    link.style.cursor = 'not-allowed';
  });
});

动态渲染元素适配方案 #

如果.removetag下的a标签是页面加载完成后动态插入的，用事件委托的方式可以兼容所有动态元素：

document.addEventListener('click', function(e) {
  // 判断点击的元素是否属于.removetag下的a标签
  if (e.target.closest('.removetag a')) {
    e.preventDefault();
  }
});

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