JavaScript待办列表添加关闭按钮后无法新增列表的问题排查

核心问题分析 #

你添加的5行代码里有两个致命错误，直接导致无法新增列表项：

1. 变量名冲突 + 文本节点创建方式错误
   全局已经用let text获取了输入框元素，但你在点击事件里又用var text = document.createElement('\u00D7');重新声明了同名变量，直接覆盖了原来的输入框引用。而且createElement的参数必须是HTML标签名（比如span），不能直接传字符\u00D7，要创建叉号文本应该用document.createTextNode方法。

2. 额外的潜在问题

   • 列表点击事件里的判断用了赋值运算符=，不是相等判断===，而且tagName返回的是大写字符串，应该写成item.target.tagName === 'LI'
   • 重置函数的循环逻辑错误，counter没有递增会导致无限循环，直接判断列表是否有子元素更可靠

修复后的完整代码 #

JavaScript部分

let form = document.querySelector('#form');
let reset = document.querySelector('#reset');
let myList = document.querySelector('#myList');
let textInput = document.querySelector('#text'); // 重命名避免冲突
let submit = document.querySelector('#submit');

submit.addEventListener('click', function(e) {
  e.preventDefault();
  // 先判断输入是否为空，避免创建空列表项
  if (!textInput.value.trim()) return;
  
  let liDOM = document.createElement('li')
  liDOM.className = 'list-group-item'
  liDOM.innerHTML = `${textInput.value[0].toUpperCase()}${textInput.value.slice(1)}`;
  myList.appendChild(liDOM);

  // 修复后的关闭按钮代码
  var span = document.createElement('span');
  var closeText = document.createTextNode('\u00D7'); // 用createTextNode创建文本
  span.className = 'close';
  span.appendChild(closeText);
  liDOM.appendChild(span);
  
  // 清空输入框
  textInput.value = '';
});

myList.addEventListener('click', function(e) {
  // 修复判断条件：用===，且tagName是大写LI
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('checked');
  }
  // 新增关闭按钮的点击事件
  if (e.target.classList.contains('close')) {
    e.target.parentElement.remove();
  }
})

function myFunction() {
  // 修复重置逻辑，直接循环删除子元素
  while (myList.firstChild) {
    myList.removeChild(myList.firstChild);
  }
}

CSS部分（增加关闭按钮的 hover 效果，提升交互）

ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* 给li添加相对定位，让关闭按钮的绝对定位相对于li */
.list-group-item {
  position: relative;
}

.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
  cursor: pointer;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

HTML部分（无需修改，保持原结构即可）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To Do List</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <form id="form">

    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8 mt-5">

          <div class="card">
            <div class="card-body">
              <div class="input-group">

                <input class="form-control" type="text" id="text" placeholder="What will you do today?">

                <div class="input-group-append">
                  <button class="btn btn-outline-secondary" type="submit" id="submit">Ekle</button>
                  <button onclick="myFunction()" type="submit" id="reset" class="btn btn-outline-secondary">Sıfırla</button>
                </div>
              </div>
            </div>
          </div>
          <div class="card mt-3">
            <div class="card-header">My List</div>
            <ul id="myList" class="list-group list-group-flush">

            </ul>


          </div>

        </div>
      </div>
    </div>
  </form>

  <script type="text/javascript" src="index.js"></script>
</body>

</html>

额外优化说明 #

• 给输入框重命名为textInput，彻底避免变量名冲突
• 新增输入为空时的判断，防止创建空列表项
• 添加了关闭按钮的点击删除逻辑
• 给列表项添加相对定位，让关闭按钮的绝对定位更合理
• 优化重置函数的循环逻辑，避免无限循环

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