To do list清空按钮仅删除半数li元素及DOM调试问题咨询

问题现象 #

• 独立开发To do list应用时，clear清空按钮点击后仅能删除列表中一半的li元素
• 已通过document.querySelectorAll('li')校验，接口返回的节点列表长度与实际列表项总数一致
• 初步排查推测：每次循环执行时document.querySelector('li')仅匹配返回第一个li元素，导致每次循环仅删除首个列表项，无法完成全量清空
• 附加咨询：是否存在可结合HTML、CSS逐步骤查看代码DOM执行过程的Web端调试程序？目前找到的几款工具仅支持调试JS逻辑，无法关联HTML结构与CSS样式的渲染变化

原有项目代码 #

JavaScript 逻辑 #

let clear = document.querySelector('.clear');
let input = document.querySelector('.input');
let submit = document.querySelector('.submit');
let list = document.querySelector('.list');

submit.addEventListener('click', function() {

  const el = document.createElement('li');

  list.appendChild(el);

  let items = document.querySelectorAll('li');

  for (i = 0; i < items.length; i++) {
    items[items.length - 1].textContent = input.value;

  }
});

clear.addEventListener('click', function() {
  console.log(document.querySelectorAll('li').length);

  for (i = 0; i < document.querySelectorAll('li').length; i++)
    list.removeChild(document.querySelector('li'));
  console.log(list);
});

CSS 样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  max-height: 100vh;
  max-width: 90vw;
}

h1 {
  text-align: center;
}

.wrap {
  padding: 50px;
  border: 2px solid black;
  border-radius: 20%;
  background-color: red;
}

.list {
  width: 100%;
  margin-left: 100px;
  font-size: 2rem;
  font-weight: bold;
}

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>Document</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="wrap">
    <h1>To do list</h1>
    <input type="text" placeholder="Add an item!" class="input" />
    <button class="submit">Submit</button>
    <button class="clear">Clear List</button>
  </div>
  <ol class="list"></ol>
  <script src="script.js"></script>
</body>

</html>

问题根因 #

你对querySelector('li')始终返回第一个匹配元素的判断是对的，但只说中了一半原因，核心问题出在循环终止条件的动态变化：
for循环每次迭代都会重新执行判断条件里的document.querySelectorAll('li').length，每删除一个li，列表长度就减1，但循环变量i始终在递增。以初始有4个li为例：

1. i=0，当前li长度为4，满足循环条件，删除第一个li，剩余3个
2. i=1，当前li长度为3，满足循环条件，删除第一个li，剩余2个
3. i=2，当前li长度为2，i不小于长度，循环直接终止
   最终刚好剩下一半li，和你遇到的现象完全吻合。

另外提交按钮的逻辑存在冗余：每次新增1个li时，会循环所有已有li，反复给最后一个li重复赋值输入框内容，完全没有必要。

修复方案 #

清空功能最简洁的实现是直接清空列表容器的内部HTML，不需要循环删除；提交功能直接给新创建的li赋值即可，无需遍历所有节点。修复后的JS代码如下：

let clear = document.querySelector('.clear');
let input = document.querySelector('.input');
let submit = document.querySelector('.submit');
let list = document.querySelector('.list');

submit.addEventListener('click', function() {
  // 输入为空时不新增无效项
  if (!input.value.trim()) return
  const el = document.createElement('li');
  el.textContent = input.value;
  list.appendChild(el);
  // 新增后清空输入框，优化交互
  input.value = ''
});

clear.addEventListener('click', function() {
  // 一次性清空所有子节点，无需循环操作
  list.innerHTML = ''
});

如果一定要用循环删除的写法，需要先把初始节点列表存为静态值，不要每次循环重新查询DOM长度：

clear.addEventListener('click', function() {
  const items = document.querySelectorAll('li');
  for (let i = 0; i < items.length; i++) {
    items[i].remove()
  }
});

关于DOM+CSS联动调试工具的解答 #

不需要额外找第三方工具，浏览器自带的开发者工具就能完全满足逐步骤调试DOM和CSS变化的需求：

• 打开开发者工具的「元素」面板，右键点击需要监听的DOM节点，选择「打断点 > 子树修改」，后续任何JS修改该节点下的DOM结构时，代码会自动暂停执行
• 代码暂停后可以逐步骤执行JS，「元素」面板会实时同步当前的DOM结构变化，右侧的「样式」面板也会实时展示当前节点匹配的所有CSS规则、最终生效的样式值，可直观看到每一步代码执行后DOM和样式的变更
• 如果需要观察渲染层面的变化，可打开开发者工具的「渲染」面板，开启重绘区域闪烁、层边框等辅助功能，直接看到样式变化对应的页面渲染更新过程

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