0

我正在制作一个待办事项列表。我在上面添加了行条纹，这很有效。
现在，当我删除一个任务时，它应该更新行条带化，但它没有。
在删除一个元素而不是例如之后。白色白色米色它应该更新为白色米色白色。
我已经尝试了很多东西，但我无法得到任何工作。公平地说，我对所有这些都是新手，并且在使用行条带化方面经验不足。
有没有办法做到这一点？

这是我到目前为止所拥有的：

loadEvents();

function loadEvents() {
  document.querySelector('form').addEventListener('submit', submit);
  document.querySelector('ul').addEventListener('click', deleteOrTick);
}

function submit(a) {
  a.preventDefault();
  let input = document.querySelector('input');
  if (input.value != '')
    addTask(input.value);
  input.value = '';
}

function addTask(task) {
  let ul = document.querySelector('ul');
  let li = document.createElement('li');
  li.innerHTML = `<div class="input-group mb-3 row"><div class="col-11"><label>${task}</label></div>
    <span class="delete">x</span></div>`;
  ul.appendChild(li);
  document.querySelector('.allToDos').style.display = 'block';
}

function deleteOrTick(a) {
  if (a.target.className == 'delete')
    deleteTask(a);
}

function deleteTask(a) {
  let remove = a.target.parentNode;
  let parentNode = remove.parentNode;
  parentNode.removeChild(remove);
  event.stopPropagation();
}
ul {
  list-style-type: none;
}

li {
  font-size: 1.3em;
  color: #2f4f4f;
}

.todo li:nth-child(2n) {
  background: #e0d9c3;
}

.todo {
  width: 500px;
}

.delete {
  cursor: pointer;
}
<div class="container">
  <form action="index.html" method="post">
    <div class="heading">
      <h1 class="header">ToDo-List</h1>
      <p class="intro">Do what you do</p>
    </div>

    <div class="input-group mb-3">
      <input type="text" class="form-control" name="task" placeholder="Add a todo" aria-describedby="basic-addon2">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="submit">Add</button>
      </div>
    </div>
  </form>
</div>
<div class="container">
  <div class="allToDos ">
    <ul class="todo">
      <li>
        <div class="input-group mb-3 row">
          <div class="col-11">
            <label>hi was geht ab</label>
          </div>
          <span class="delete">x</span>
        </div>
      </li>
    </ul>
  </div>
</div>

4

2 回答 2

0 
document.querySelector('li').addEventListener('click',deleteOrTick); // not ul

function deleteTask(a){
    let remove = a.currentTarget;
    let parentNode = remove.parentNode;
    parentNode.removeChild(remove);
    a.stopPropagation(); //not event
}
于 2020-05-30T22:43:21.377 回答
0

deleteTask可

function deleteTask(event) {
    let remove = event.target.parentNode;
    let parentNode = remove.parentNode;
    remove.parentNode.remove();
    event.stopPropagation();
}
于 2020-05-31T17:27:56.013 回答