使用JavaScript在HTML页面加载时移除指定链接失败，请求帮助

我原本确定自己的思路是对的，但不知道为什么这段JavaScript代码无法生效，没法移除第二个链接（Twitter），有没有人能帮我看看？

我的HTML代码：

<div class="p-4">
  <h4 class="font-italic">Altro</h4>
  <ol class="list-unstyled">
    <li><a href="#">GitHub</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Facebook</a></li>
  </ol>
</div>

我的JavaScript代码：

document.addEventListener("DOMContentLoaded", function RemoveLink() {
  // Seleziona il secondo link (Twitter) e rimuovilo
  var secondLink = document.querySelector('.list-unstyled li:nth-child(2) a');
  if (secondLink) {
    secondLink.remove()
  }
});

Hey Mike, 我来帮你排查下问题~

其实你的代码本身是能运行的，但它只移除了<li>里面的<a>标签，那个空的<li>元素还留在页面上，所以看起来好像“第二个链接没被移除”。如果你的目标是把整个Twitter的列表项都删掉，那得调整选择器，直接选中对应的<li>再移除：

修正后的代码 #

document.addEventListener("DOMContentLoaded", function() {
  // 直接选中第二个列表项并移除
  const secondListItem = document.querySelector('.list-unstyled li:nth-child(2)');
  if (secondListItem) {
    secondListItem.remove();
  }
});

要是你确实只需要移除<a>标签而保留<li>，那你的原始代码其实没问题，可能是测试时遇到了浏览器缓存或者其他脚本干扰的情况，可以试试清空浏览器缓存后刷新页面，或者检查页面上有没有其他脚本影响了这个元素的操作。

另外补充个小细节：nth-child(2)是从1开始计数的，你这里的选择器是正确选中第二个<li>的，这部分没毛病~

备注：内容来源于stack exchange，提问作者Mike Youlend