Javascript 无法从ul todo列表中删除列表项

我试图用

querySelectorAll

删除ul中的列表项，并删除每个li元素。请问错误在哪里？如何纠正

<div class='container'>
         <h1> New todo list</h1>
         <form>
                  <input type= 'text' id='item'             
      required>
          <ul> </ul>
      <button id='button'> clear all</
       button>
</div>

---

我对您的代码进行了一些编辑，并添加了一个新按钮以保持功能的独立性。如果我正确理解了你的问题，我想这就是你想要的功能

<div class='container'>
  <h1> New todo list</h1>
  <form>
    <input type='text' id='item' required>
    <ul id="myList"></ul>
    <button id='button'>add</button>
  </form>
  <button id="clear">Clear</button>
</div>

新待办事项清单

添加
清楚的

JS:

var form=document.querySelector（'form'）
var ul=document.querySelector（'ul'）
var button=document.querySelector（“#button”）；
var input=document.querySelector（“#项”）；
var clear=document.querySelector（'#clear'）；
var liMaker=text=>{
var li=document.createElement（'li'）；
li.textContent=文本；
ul.insertBefore（li，ul.childNodes[0]）
}
表.addEventListener（'submit'，函数（e）{
e、 预防默认值（）
liMaker（输入值）
input.value=''；
});
clear.addEventListener（“单击”，删除）；
函数删除（）{
saveToDos（）；
而（ul.第一个孩子）{
ul.removeChild（ul.firstChild）；
}
}
函数saveToDos（）{
var项目=ul.getElementsByTagName（“li”）；
对于（变量i=0；i

---

这里有一个指向工作笔的链接：

e.target.item.remove（）

没有意义目标（即您单击的内容）没有item@epascarello你能详细说明一下吗？你能添加localstorage吗？这样它在重新加载时就不会丢失项目。只需在底部添加一点代码，在清除列表时会保存到本地存储：）@CaeSeas你能让它在重新加载页面时仍保留列表吗？清除按钮清除localstorage。savedToDos是数组还是存储变量。@daneillone它是一个待办事项数组，然后作为数组保存到本地存储。您需要在页面加载时检查本地存储值，如果它存在，则在数组中循环并将它们添加到li元素中。

<div class='container'>
  <h1> New todo list</h1>
  <form>
    <input type='text' id='item' required>
    <ul id="myList"></ul>
    <button id='button'>add</button>
  </form>
  <button id="clear">Clear</button>
</div>

var form = document.querySelector('form')
var ul = document.querySelector('ul')
var button = document.querySelector('#button');
var input = document.querySelector('#item');
var clear = document.querySelector('#clear');

 var liMaker = text => {
    var li = document.createElement('li');
    li.textContent = text;
    ul.insertBefore(li, ul.childNodes[0])
 }

 form.addEventListener('submit', function(e) {
   e.preventDefault()
   liMaker(input.value)
   input.value = '';
 });

clear.addEventListener('click', remove);

 function remove(){
  saveToDos();
      while (ul.firstChild) {
        ul.removeChild(ul.firstChild);
      }
    }

function saveToDos() {
  var items = ul.getElementsByTagName("li");
  for (var i = 0; i < items.length; ++i) {
    savedToDos.push(items[i].innerHTML);
  }
  localStorage.setItem('savedValues', savedToDos);
}