待办事项列表清除按钮

Question

我在没有任何教程的情况下创建待办事项列表，当我尝试编写清除按钮时卡住了。 我有一个问题，因为这段代码只删除了我列表中一半的“li”项目。 我检查了 document.querySelectorAll('li) 的长度，它返回了 list length 的正确值，我认为在每个循环执行中我删除了第一个元素，因为 document.querySelector('li) 只返回第一个元素。 你可以帮帮我吗？ 还有一个问题：在网络程序的某个地方，我可以看到我的代码在 DOM 中的逐步执行吗？ 我发现很少有网站，但我只能在没有 html 和 css 的情况下调试代码。

有我的代码：

 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); });

 * { 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; }

 <!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>

Answer 1

在您的情况下，您的循环每次循环都在计算其长度，而i仍在递增

我有两个元素，它会删除第一项，然后在第二个循环中，列表的长度为 1，i 等于 1，因此循环会中断

您可以使用for of循环而不是for i循环并通过引用删除子项

clear.addEventListener('click', function() {
  const childs = document.querySelectorAll('li')
  for (const child of childs){
    list.removeChild(child)
  }
});

注意：如果您实例化列表，这也可以使用 for i 循环来完成

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

Answer 2

我发明了一种新方法来解决它

clear.addEventListener('click', function () {
  for (i = 0; i < document.querySelectorAll('li').length + i; i++)
    list.removeChild(document.querySelector('li'));
  console.log(list);
});

在每次迭代中，我添加 'i' 。 所以我更新长度

待办事项列表清除按钮

问题描述

2 个解决方案

解决方案1
1 2022-06-10 15:05:32

解决方案2
0 2022-06-10 15:29:44

待办事项列表清除按钮

问题描述

2 个解决方案

解决方案1 1 2022-06-10 15:05:32

解决方案2 0 2022-06-10 15:29:44

解决方案1
1 2022-06-10 15:05:32

解决方案2
0 2022-06-10 15:29:44