如何移除无序列表中的多余项目符号？JS代码修复咨询

看起来你的代码有几个小细节问题导致了多余的项目符号，我来帮你一步步解决：

问题根源分析 #

• 列表标签未正确闭合：你在拼接列表项HTML时写的是 <li>" + pokemonArray[i] + "<li>，这相当于生成了两个未闭合的<li>起始标签，浏览器会自动补全结构，但这会额外生成空的列表项，直接导致多余的项目符号。
• 内容叠加未重置：每次调用addPokemon时，你既会往pokemonArray里追加新元素，又用innerHTML +=往容器里累加内容，这就会导致之前的列表项一直保留，新项不断叠加，重复渲染旧内容。
• （可选优化）输入判断逻辑冗余：你用typeof element[i].value !== "undefined"判断输入有效性，其实输入框的value默认就是字符串类型，直接判断element[i].value是否为空更简洁。

修复后的完整代码 #

function addPokemon() { 
  // 每次添加前先重置数组和容器，避免重复渲染旧内容
  pokemonArray = [];
  const pokemonContainer = document.getElementById("pokemon-container");
  pokemonContainer.innerHTML = "";

  // 遍历收集有效输入值
  for (var i = 0; i < element.length; i++) { 
    if (element[i].value) { // 空字符串会被自动判定为false，简化判断逻辑
      pokemonArray.push(element[i].value); 
    } 
  } 

  console.log(pokemonArray); 

  // 渲染列表，注意使用闭合的</li>标签
  for (var i = 0; i < pokemonArray.length; i++) { 
    pokemonContainer.innerHTML += "<li>" + pokemonArray[i] + "</li>"; 
  } 

  // 可选：清空输入框，提升用户体验
  document.getElementById("pokemon-names").value = "";
} 

var pokemonArray = []; 
var element = document.getElementsByClassName("move-container");

关键修复点说明 #

1. 重置状态：每次调用函数时先清空数组和容器内容，确保每次都是渲染最新的输入列表，不会叠加旧项。
2. 闭合标签：把列表项结尾的<li>改成</li>，保证每个列表项的HTML结构完全正确，避免浏览器自动生成多余的空列表项。
3. 简化判断：用element[i].value直接判断输入是否有效，代码更简洁易读。

另外你原来代码里的pokemonName.innerHTML = document.getElementById("pokemon-names").value;这段和列表渲染无关，如果不是业务需要可以考虑移除，或者根据你的实际需求调整~

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