Невозможно удалить элемент списка из списка ul todo - PullRequest
Новая
       25

Невозможно удалить элемент списка из списка ul todo

0 голосов
/ 02 июля 2019

Я попытался удалить элемент списка внутри ul с помощью querySelectorAll и удалить проход через каждый элемент 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())
        }

1 Ответ

1 голос
/ 02 июля 2019

Я немного отредактировал ваш код и добавил новую кнопку, чтобы разделить функциональность.Я думаю, что это тот тип функциональности, который вы использовали после того, как я правильно понял ваш вопрос. 

<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

...