How can I remove href attribute from anchor tag using JavaScript?

user_16933952 0
Viewed 1052

I want to remove or disable anchor tag attribute which comes under <div class="removetag"> class from JavaScript without giving specific id to one anchor tag we can use div class for that.

Please help me how to I can do this thing.

My code

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

<div class="notremove">
  <a href="google.com"> google </a>
</div>
css html jquery javascript
5 Answers

I think this is what you need:

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

Since you've tagged the question with jQuery, you can solve your problem this way:

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

Demo

$(".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>

user_9492170

to remove a an attribute you should use removeAttribute('attributeName'): removeAttribute('href')

to select a class use querySelector. However this will only return the first element with this class. To get all elements with this class you need to use querySelectorAll and use forEach to give a command to all of those elements.

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>

user_140724200

To remove href attribute we can simply use dom.removeAttribute("href"). And if you want to remove attribute of hyperlinks with their parent div's class name then you can use docunent.querySelector() Or document.querySelectorAll().

In your case you can do like:

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>

user_148117780

This can easily be done with a querySelector and 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

But you may want to consider the possibility of having more than one element from which you want to remove the href. To do so you can use querySelectorAll, which returns a node list of all elements that match your criteria. Then loop through all elements in the list and remove the attribute for each of these:

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
})

Edit: If you want to take this a step further you can also create a reusable function. This can be used whenever you want to remove any attribute from any element.

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
    });
};

You can call this function with any selector (e.g. #id or .class or tag) like this:

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

Hope this helps :)

user_153127950
Related