Question

我尝试使用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>

代码如下：

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

   var liMaker = text => {
         var li = 
           document.createElement('li')
           li.textContent = text
           ul.insertBefore(li, 
                      ul.childNodes[0])
            button.onclick = remove
       }
      form.addEventListener('submit', 
             function(e){
            e.preventDefault()
           liMaker(input.value)
            input.value = ' '
       })
       function remove(e){
        Array.from(
           document.querySelectorAll('
            li')).forEach(item => 
            e.target.item.remove())
        }

Answer 1

我对您的代码做了一些编辑，并添加了一个新按钮以使功能分开。如果我正确理解了您的问题，我认为这就是您所追求的功能。

<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('#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);
}

以下是指向工作笔的链接：https://codepen.io/caeking/pen/RzyKmV

无法从待办事项清单中删除清单项目

1 个答案: