使用JavaScript從鏈接中刪除href

Question

我正在使用此代碼從頁面中刪除href鏈接。 效果很好，只是我不想定位所有鏈接。 相反，我想定位div中的所有鏈接，例如禁用ID為“ test2”的特定div的所有鏈接。

var all_links = document.getElementsByTagName("a");

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

Answer 1

您可以為此使用querySelectorAll() 。 傳遞與您需要定位的元素匹配的CSS選擇器 。 根據您的描述， div#test2 a將執行以下操作：

var all_links = document.querySelectorAll("div#test2 a");

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

的jsfiddle

或者，為了獲得最大兼容性（IE <9）：

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

Answer 2

由於包括了jQuery標簽：-

 $('#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> 

Answer 3

為此，可以使用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> 

或者，而不是刪除href屬性，而是將其設置為'#'的值：

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> 

或者，考慮到沒有href屬性的<a>元素可能沒有特定的“目的”，我們可以改開文本或其他內容，並刪除不再有用的<a>元素：

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> 

參考文獻：

• Array.from() 。
• Array.prototype.forEach() 。
• 箭頭功能 。
• document.querySelectorAll() 。
• Node.insertBefore() 。
• Node.parentNode 。
• Node.removeChild() 。
• while (...)

Answer 4

由於您已使用jQuery對此進行了標記，因此可以使用以下代碼：

$("div#test2 a").removeAttr("href");