getElementsByClassName()失效：如何仅为指定类列表添加关闭按钮

首先你需要给目标列表加上ToDo-List类（不用给每个li单独加类，给ul加即可），这样才能精准定位到要操作的列表：

<div id="myDIV" class="to-do-header">
    <h2 class="table-title">To Do</h2>
    <input type="text" id="myInput" placeholder="What do you want to do?">
    <span onclick="newElement()" class="addBtn">Add</span>
</div>

<ul id="myUL" class="ToDo-List"> <!-- 新增目标类，标识需要操作的列表 -->
    <li>Wake up</li>
    <li>Meeting with the team</li>
    <li>Have an amazing lunch</li>
    <li>Finsish the project</li>
    <li>Get some pizza</li>
    <li>Go to sleep</li>
</ul>

然后修改JavaScript代码，只针对ToDo-List类下的列表项操作，同时优化事件绑定逻辑，避免重复代码：

// 给ToDo-List下的所有现有列表项添加关闭按钮
const todoList = document.querySelector('.ToDo-List');
if (todoList) {
  todoList.querySelectorAll('li').forEach(item => addCloseBtn(item));
}

// 用事件委托处理关闭按钮点击，支持动态添加的元素，且仅对ToDo-List下的按钮生效
document.addEventListener('click', e => {
  if (e.target.classList.contains('close') && e.target.closest('.ToDo-List')) {
    e.target.parentElement.style.display = 'none';
  }
});

// 切换选中状态，仅针对ToDo-List下的列表项
todoList?.addEventListener('click', ev => {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
});

// 添加新待办项的函数
function newElement() {
  const inputVal = document.getElementById('myInput').value.trim();
  if (!inputVal) {
    alert("You must write something!");
    return;
  }

  const li = document.createElement('li');
  li.textContent = inputVal;
  todoList.appendChild(li);
  addCloseBtn(li); // 给新添加的项加关闭按钮

  document.getElementById('myInput').value = '';
}

// 封装添加关闭按钮的复用函数，减少重复代码
function addCloseBtn(li) {
  const span = document.createElement('SPAN');
  span.className = 'close';
  span.textContent = '×';
  li.appendChild(span);
}

核心改动说明： #

• 精准定位目标列表：通过querySelector('.ToDo-List')只选中需要操作的列表，不会影响页面上其他ul元素。
• 事件委托优化：不需要每次新增元素都循环绑定点击事件，一次绑定就能处理所有现有和未来添加的关闭按钮，同时通过closest('.ToDo-List')确保只有目标列表内的按钮触发逻辑。
• 代码复用：把添加关闭按钮的逻辑封装成独立函数，减少重复代码，后续维护更方便。

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