Проблема с Javascript функцией clearList - PullRequest
Новая
       21

Проблема с Javascript функцией clearList

1 голос
/ 05 марта 2020

Я создал список с HTML, CSS и Javascript, который вы можете увидеть ниже.

Работает нормально до того момента, когда я нажимаю Очистить, и список очищается, и Кнопка очистки также исчезает.

Я все еще изучаю Javascript и не уверен, что не так в моем коде. Может кто-нибудь помочь с тем, какую строку кода мне нужно добавить / удалить, чтобы предотвратить возникновение этой ошибки? 

(() => {

  const listElement = document.getElementById('wishlist');
  const newItem = document.getElementById('newItem');
  const addBtn = document.getElementById('addBtn');
  const clearBtn = document.getElementById('clearBtn');

  //add new destination to the list
  function addItem(item) {
    const itemElement = document.createElement('li');
    itemElement.textContent = item;
    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'x';
    itemElement.appendChild(deleteButton);
    deleteButton.addEventListener('click', ev => { // <- new
      listElement.removeChild(itemElement); // <- new
    }); // <- new
    listElement.appendChild(itemElement);
  };

  function clearList() {
    while (listElement.firstChild) {
      listElement.removeChild(listElement.firstChild);
    }
  }

  function renderList(list) {
    list.forEach(addItem);
  }

  addBtn.addEventListener('click', ev => {
    newItem.value.split(',').forEach(v => {
      if (v) {
        addItem(v);
      }
    });
    newItem.value = null;
  });

  clearBtn.addEventListener('click', ev => {
    clearList();
  });

  window.addEventListener('beforeunload', ev => {
    const items = [...listElement.childNodes];
    if (items.length) {
      const list = items.map(item => {
        return item.textContent.slice(0, -1);
      });
      localStorage.setItem('destination-list', list);
    } else {
      localStorage.removeItem('destination-list');
    }
  });

  window.addEventListener('DOMContentLoaded', ev => {
    const shoppingList = localStorage.getItem('destination-list');
    if (destinationList) {
      renderList(destinationList.split(','));
    }
  });

  newItem.addEventListener("keyup", ev => {
    if (ev.key === "Enter") {
      addBtn.click();
    }
  });

})()
ol {
  padding: 1em 0;
  margin: 0;
}

li button {
  opacity: 0.05;
  transition: 0.4s;
  background: none;
  border: none;
}

li:hover button {
  opacity: 0.4;
}

li button:hover {
  opacity: 1;
}

button,
input {
  font-size: inherit;
}

input {
  padding-left: 1em;
  flex: 1;
  min-width: 5em;
}

#clearBtn {
  width: 100%;
}

li button {
  opacity: 0.05;
  transition: 0.4s;
  background: none;
  border: none;
}

li:hover button {
  opacity: 0.4;
}

li button:hover {
  opacity: 1;
}

button,
input {
  font-size: inherit;
}

input {
  padding-left: 1em;
  flex: 1;
  min-width: 5em;
}
<div class="destination-list">
  <h2>Destination Wish List</h2>
  <input placeholder="New Destination" id="newItem">
  <button id="addBtn">Add</button>
  <ol id="wishlist">
    <button id="clearBtn">Clear</button>
  </ol>
</div>

Спасибо.

Ответы [ 2 ]

2 голосов
/ 05 марта 2020

Проблема в том, что вы удерживаете кнопку очистки внутри ol и удаляете дочерние элементы списка, когда нажимаете clear, перемещаете ее за пределы ol, и она будет работать следующим образом: 

(() => {

  const listElement = document.getElementById('wishlist');
  const newItem = document.getElementById('newItem');
  const addBtn = document.getElementById('addBtn');
  const clearBtn = document.getElementById('clearBtn');

//add new destination to the list
  function addItem(item) {
    const itemElement = document.createElement('li');
    itemElement.textContent = item;
    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'x';
    itemElement.appendChild(deleteButton);
    deleteButton.addEventListener('click', ev => { // <- new
      listElement.removeChild(itemElement); // <- new
    }); // <- new
    listElement.appendChild(itemElement);
  };

  function clearList() {
    while (listElement.firstChild) {
      listElement.removeChild(listElement.firstChild);
    }
  }

  function renderList(list) {
    list.forEach(addItem);
  }

  addBtn.addEventListener('click', ev => {
    newItem.value.split(',').forEach(v => {
      if (v) {
        addItem(v);
      }
    });
    newItem.value = null;
  });

  clearBtn.addEventListener('click', ev => {
    clearList();
  });

  window.addEventListener('beforeunload', ev => {
    const items = [...listElement.childNodes];
    if (items.length) {
      const list = items.map(item => {
        return item.textContent.slice(0, -1);
      });
      localStorage.setItem('destination-list', list);
    } else {
      localStorage.removeItem('destination-list');
    }
  });

  window.addEventListener('DOMContentLoaded', ev => {
    const shoppingList = localStorage.getItem('destination-list');
    if (destinationList) {
      renderList(destinationList.split(','));
    }
  });

  newItem.addEventListener("keyup", ev => {
    if (ev.key === "Enter") {
      addBtn.click();
    }
  });

})()
ol{
  padding: 1em 0;
  margin: 0;
}

li button {
  opacity: 0.05;
  transition: 0.4s;
  background: none;
  border: none;
}
li:hover button {
  opacity: 0.4;
}
li button:hover {
  opacity: 1;
}
button, input {
  font-size: inherit;
}
input {
  padding-left: 1em;
  flex: 1;
  min-width: 5em;
}
#clearBtn{
  width: 100%;
}

li button {
  opacity: 0.05;
  transition: 0.4s;
  background: none;
  border: none;
}
li:hover button {
  opacity: 0.4;
}
li button:hover {
  opacity: 1;
}
button, input {
  font-size: inherit;
}
input {
  padding-left: 1em;
  flex: 1;
  min-width: 5em;
}
<div class="destination-list">
<h2>Destination Wish List</h2>
<input placeholder="New Destination" id="newItem">
<button id="addBtn">Add</button>
<ol id="wishlist">
</ol>
<button id="clearBtn">Clear</button>
1 голос
/ 05 марта 2020 
<div class="destination-list">
  <h2>Destination Wish List</h2>
  <input placeholder="New Destination" id="newItem">
  <button id="addBtn">Add</button>
  <button id="clearBtn">Clear</button>
  <ol id="wishlist">

  </ol>
...