Question

我正在建立词汇表页面。我在页面顶部列出了每个字母的列表，它们通过锚文本链接到内容的正确部分。如果信件中没有任何条款，我想从信件中删除链接。

我没有收到任何错误，但是代码没有删除链接，或者就我所知没有任何影响。

尝试删除B的链接

        function removeLink (){

        var letternavcontent = document.getElementById("letternav").innerHTML;
        var letter = document.getElementsByClassName("letter");

         if ( letternavcontent.indexOf('B') > -1) {
         letter.removeAttribute("href");
         }
         }

        <p id="letternav">| <a class="letter" 
        href="/glossary.html#a">A</a> | <a class="letter" 
        href="/glossary.html#b">B</a></p>

Answer 1

选中此pen。

document.getElementsByClassName返回 all 个具有该类名称的元素，而不仅仅是一个。因此，您必须遍历此列表并检查每个列表。

function removeLink (){

  var letter = document.getElementsByClassName("letter");

  for (var i = 0; i < letter.length; i++) {
    if (letter[i].innerHTML.indexOf('B') > -1) {
      letter[i].removeAttribute("href");
    }
  }
}

Answer 2

怎么样？

const removeLinkFromLetter = letter => {

  // iterates over every letter element
  [...document.querySelectorAll('.letter')].forEach(elt => {
    // if the element has the specified letter as its text...
    if (elt.innerText.trim()==letter) {
      // ...change its content to the letter without the anchor tag
      elt.innerHTML = letter;
    }
  });

}

window.onload = () => {
  removeLinkFromLetter('A');
}

<p id="letternav">
  |
  <span class="letter">
    <a href="/glossary.html#a">
      A
    </a>
  </span>
  |
  <span class="letter">
    <a href="/glossary.html#b">
      B
    </a>
  </span>
  |
</p>

删除包含特定文本的链接

2 个答案: