remove href from link using JavaScript

Question

I am using this code to remove the href links from my page. It works great except I do not want to target all the links. Instead, I want to target all of the links within a div, like disable all the links of a particular div with an id "test2".

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

Solution 1

You can use querySelectorAll() for that. Pass a CSS selector that matches the elements you need to target. From what you have described, div#test2 a will do:

var all_links = document.querySelectorAll("div#test2 a");
for(var i=0; i<all_links.length; i++){
    all_links[i].removeAttribute("href");
}

JSFiddle

Or, for maximum compatibility (IE <9):

var all_links = document.getElementById('test2').getElementsByTagName("a");

Solution 2

There are a few options for this, here using ES6:

// retrieving all <a> elements within <div id="test2">, using
// document.querySelectorAll() and converting that collection
// into an Array, using Array.from():
var all_links = Array.from(document.querySelectorAll("div#test2 a"))
    // iterating over that Array using Array.prototype.forEach(),
    // along with an Arrow function to remove the 'href' attribute
    // from each of the <a> elements in the Array:
    .forEach(link => link.removeAttribute('href'));

var all_links = Array.from(document.querySelectorAll("div#test2 a")).forEach(link => link.removeAttribute('href'));

<a href="#href1">Link 1</a>
<div id="test2">
  <a href="#href2">Link 2</a>
  <a href="#href3">Link 3</a>
</div>
<a href="#href4">Link 4</a>
<div id="test3">
  <a href="#href5">Link 5</a>
  <a href="#href6">Link 6</a>
</div>

Or, rather than removing the href attribute setting it instead to the value of '#':

var all_links = Array.from(document.querySelectorAll("div#test2 a"))
    // here we use setAttribute() to set the value of the href
    // attribute to the '#' value:
    .forEach(link => link.setAttribute('href', '#'));

var all_links = Array.from(document.querySelectorAll("div#test2 a")).forEach(link => link.setAttribute('href', '#'));

<a href="#href1">Link 1</a>
<div id="test2">
  <a href="#href2">Link 2</a>
  <a href="#href3">Link 3</a>
</div>
<a href="#href4">Link 4</a>
<div id="test3">
  <a href="#href5">Link 5</a>
  <a href="#href6">Link 6</a>
</div>

Or, given that an <a> element without an href attribute arguably serves no particular 'purpose' we could instead unwrap the text, or other contents, and remove the no-longer-useful <a> element:

var all_links = Array.from( document.querySelectorAll("div#test2 a") )
  // using the anonymous function of Array.prototype.forEach() rather
  // than Arrow functions, given the work being done here:
  .forEach(function(link){
    // while the <a> element has a firstChild:
    while(link.firstChild) {
      // we access the parentNode of the <a> and
      // use the insertBefore() method to insert
      // the firstChild of the <a> before the <a>:
      link.parentNode.insertBefore(link.firstChild, link);
    }
    // once the <a> is emptied of its content,
    // we again access the parentNode and remove
    // the <a> element itself:
    link.parentNode.removeChild(link);
});

var all_links = Array.from(document.querySelectorAll("div#test2 a")).forEach(function(link) {
  while (link.firstChild) {
    link.parentNode.insertBefore(link.firstChild, link);
  }
  link.parentNode.removeChild(link);
});

<a href="#href1">Link 1</a>
<div id="test2">
  <a href="#href2">Link 2</a>
  <a href="#href3">Link 3</a>
</div>
<a href="#href4">Link 4</a>
<div id="test3">
  <a href="#href5">Link 5</a>
  <a href="#href6">Link 6</a>
</div>

References:

• Array.from().
• Array.prototype.forEach().
• Arrow functions.
• document.querySelectorAll().
• Node.insertBefore().
• Node.parentNode.
• Node.removeChild().
• while (...).

Solution 3

As the jQuery tag is included:-

$('#test2 a').removeAttr('href');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="test">test</a> 
<div id="test2">
  <a href="test1">test</a>
  <a href="test2">test</a>
</div>