如何使用 JavaScript 从锚标记中删除 href 属性？ [复制]答案

【问题标题】：How can I remove href attribute from anchor tag using JavaScript? [duplicate]如何使用 JavaScript 从锚标记中删除 href 属性？ [复制]
【发布时间】：2021-11-12 00:25:18
【问题描述】：

我想从 JavaScript 中删除或禁用 <div class="removetag"> 类下的锚标签属性，而不给一个锚标签提供特定的 id，我们可以为此使用 div 类。

请帮助我如何做这件事。

我的代码

<div class="removetag">
  <a href="google.com"> google </a>
</div>

<div class="notremove">
  <a href="google.com"> google </a>
</div>

【问题讨论】：

已经尝试过querySelectoAll + forEach？

标签： javascript html jquery css

【解决方案1】：

我认为这是你需要的：

document.querySelector('.removetag a').removeAttribute('href')

【讨论】：

通过使用这个工作，我也有一个疑问，如果我们在 div 中有多个锚标签，那么我们如何才能做到这一点来指定锚标签
正如其他人所说，您可以尝试使用 forEach 进行 querySelectorAll。如果要指定锚标记，则该标记必须具有其他标记所没有的一些特殊内容。例如，索引或类名。

【解决方案2】：

由于您已使用jQuery 标记问题，因此您可以通过以下方式解决您的问题：

$(".removetag a").removeAttr("href");

演示

$(".removetag a").removeAttr("href");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="removetag">
  <a href="google.com"> google </a>
</div>

<div class="notremove">
  <a href="google.com"> google </a>
</div>

【讨论】：

【解决方案3】：

要删除属性，您应该使用 removeAttribute('attributeName'): removeAttribute('href')

选择一个类使用querySelector。但是，这只会返回此类的第一个元素。要使用此类获取所有元素，您需要使用 querySelectorAll 并使用 forEach 向所有这些元素发出命令。

var removetag = document.querySelectorAll('.removetag a');
removetag.forEach(el => el.removeAttribute('href'));

<div class="removetag">
  <a href="google.com"> google </a>
</div>

<div class="notremove">
  <a href="google.com"> google </a>
</div>

<div class="removetag">
  <a href="google.com"> google </a>
</div>

<div class="notremove">
  <a href="google.com"> google </a>
</div>

【讨论】：

【解决方案4】：

要删除 href 属性，我们可以简单地使用dom.removeAttribute("href")。如果你想删除超链接的属性及其父 div 的类名，那么你可以使用docunent.querySelector() 或document.querySelectorAll()。

在你的情况下，你可以这样做：

var a = document.querySelectorAll('.removetag a'),
  i;

for (i = 0; i < a.length; ++i) {
  a[i].removeAttribute("href");
}

<div class="removetag">

  <a href="google.com"> google </a>
</div>

<div class="notremove">
  <a href="google.com"> google </a>
</div>

【讨论】：

您的代码中可能有拼写错误。除此之外，如果您可以简单地使用forEach，那么就没有理由使用“冗长而复杂”的声明，它的副作用是消耗的计算能力要少得多。

【解决方案5】：

这可以通过querySelector 和el.removeAttribute 轻松完成：

let removeHrefTarget = document.querySelector(".removeatag a"); //select the element that has the according class
removeHrefTarget.removeAttribute("href"); //remove the href-attribute from that element

但您可能需要考虑是否有多个元素要从中删除 href。为此，您可以使用querySelectorAll，它会返回符合您的条件的所有元素的节点列表。然后遍历列表中的所有元素并删除每个元素的属性：

let removeHrefTargets = document.querySelectorAll(".removeatag a"); //select all elements that have the according class
removeHrefTargets.forEach((el) => { //loop through each of these elements
    el.removeAttribute("href"); //remove the href attribute
})

编辑： 如果您想更进一步，您还可以创建一个可重用的函数。每当您想从任何元素中删除任何属性时都可以使用它。

const removeAttribute = (selector, attribute) => {
    let removeAttributeTargets = document.querySelectorAll(selector); //select all elements that have the according class
    removeAttributeTargets.forEach((el) => { //loop through each of these elements
        el.removeAttribute(attribute); //remove the href attribute
    });
};

您可以使用任何选择器（例如 #id 或 .class 或标签）调用此函数，如下所示：

removeAttribute(".myclass", "style");

希望这会有所帮助:)

【讨论】：