时间戳

首页 > 解决方案 > 如何获取 javascript 函数来删除添加的待办事项？

javascript - 如何获取 javascript 函数来删除添加的待办事项？

问题描述

我li在 html 中有一个 javascript 可以删除的预制列表，但是一旦我添加了另一个li，它就不会删除新的。我认为问题是for循环，但我不知道解决这个问题的另一种方法。你有另一种解决这个问题的方法吗？我试过了e.target.matches，甚至e.target.tagName === 'SPAN'

/* eslint-disable require-jsdoc */
/* eslint-disable no-invalid-this */
/* eslint-disable no-var */

// select all the needed elements from Java
var deleteTodo = document.querySelectorAll('span');
var strikeThrough = document.querySelectorAll('li');
var input = document.querySelector('input');
var ul = document.querySelector('ul');

// delete done todos
for (var i = 0; i < deleteTodo.length; i++) {
  deleteTodo[i].addEventListener('click', function(e) {
    if (e.target.tagName === 'SPAN') {
      console.log('span clicked');
    }
  });
}

// strikethrough effect on done todos
for (var i = 0; i < strikeThrough.length; i++) {
  strikeThrough[i].addEventListener('click', function(e) {
    if (e.target.matches('li')) {
      this.classList.toggle('done');
    }
  });
}

// add a todo task
input.addEventListener('keypress', function(e) {
  if (event.keyCode === 13) {
    var newTodo = input.value;
    var newLi = document.createElement('li');
    newLi.innerHTML = '<span>X</span> ' + newTodo;
    this.value = '';
    ul.appendChild(newLi);
  }
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>2Do</title>
  </head>
  <body>
    <div class="container"></div>
    <h1>2-Do List</h1>
    <input type="text" placeholder="Add New Todo" />
    <div>
      <ul>
        <li><span>X</span> one</li>
        <li><span>X</span> Two</li>
        <li><span>X</span> Task Three</li>
      </ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

标签： javascripttypescript

解决方案

您遇到的问题不在于循环本身，而是将侦听器添加到 span 元素时的问题。由于您要添加一个新的 span 元素，因此您必须向新对象添加一个侦听器，请尝试这样的操作。

var deleteTodo = document.querySelectorAll('span');
var strikeThrough = document.querySelectorAll('li');
var input = document.querySelector('input');
var ul = document.querySelector('ul');


const addSpanListeners = function(spanArr){
  for (var i = 0; i < spanArr.length; i++) {
    spanArr[i].addEventListener('click', function(e) {
      if (e.target.tagName === 'SPAN') {
        console.log('span clicked');
      }
    });
  }
}


// delete done todos
addSpanListeners(deleteTodo);

// strikethrough effect on done todos
for (var i = 0; i < strikeThrough.length; i++) {
  strikeThrough[i].addEventListener('click', function(e) {
    if (e.target.matches('li')) {
      this.classList.toggle('done');
    }
  });
}

// add a todo task
input.addEventListener('keypress', function(e) {
  if (event.keyCode === 13) {
    var newTodo = input.value;
    var newLi = document.createElement('li');
    newLi.innerHTML = '<span>X</span> ' + newTodo;
    this.value = '';
    ul.appendChild(newLi);
    deleteTodo = document.querySelectorAll('span');
    addSpanListeners(deleteTodo);
  }  
});

推荐阅读