循环遍历列表打开链接时，如何临时排除span元素干扰？

1. 修复循环只打开第一个链接的问题 #

你当前的循环代码里，每次都固定取option[0]，导致不管循环多少次，打开的都是第一个列表项的内容。把option[0]改成option[i]即可遍历所有列表项：

var option = listContainer.getElementsByTagName("li");
for (var i = 0; i < option.length; i++) {
  // 替换固定索引0为循环变量i
  window.open(option[i].querySelector('a').href,'_blank','location=0');
}

2. 避免span内容被纳入链接的问题 #

innerText会获取列表项内所有子元素的文本（包括span的"×"），直接取li内部<a>标签的href属性是最准确的方式——毕竟你创建列表时已经生成了链接标签。

如果担心后续DOM结构变化，也可以在创建列表项时把链接存到自定义数据属性里，获取更直接：

修改创建列表的代码：

if (inputBox2.value === "python") {
  let li = document.createElement("li");
  let linkUrl = inputBox.value;
  // 将链接存入li的自定义数据属性
  li.dataset.url = linkUrl;
  li.innerHTML = linkUrl.link(linkUrl);
  listContainer.appendChild(li);
  let span = document.createElement("span");
  span.innerHTML = "\u00d7";
  // 给删除按钮加类名，方便后续绑定事件
  span.className = "delete-btn";
  li.appendChild(span);
}

对应的打开链接代码：

var option = listContainer.getElementsByTagName("li");
for (var i = 0; i < option.length; i++) {
  // 直接从自定义属性读取链接
  window.open(option[i].dataset.url,'_blank','location=0');
}

3. 优化删除按钮的实现 #

不用依赖列表项位置删除，直接给span绑定点击事件即可：

// 在创建span后添加这段代码
span.addEventListener('click', function() {
  this.parentElement.remove();
});

点击"×"就能直接删除对应的列表项，逻辑更清晰灵活。

内容的提问来源于stack exchange，提问作者Nella22