問題是你覆蓋了ulwith的內(nèi)容ul.textContent = '';
一種快速的方法是.hidden在您的 中有一個類，如果它們與搜索輸入不匹配css，則將其添加到lis 以隱藏不匹配的結果：
const addInput = document.querySelector('.add input');
const searchInput = document.querySelector('.search input');
const addButton = document.querySelector('.add button');
const ul = document.querySelector('ul');
const taskNumber = document.querySelector('h1 span');
let tasks = 0;
const addTask = (e) => {
e.preventDefault();
tasks++;
let task = addInput.value;
if (task === '') return;
const li = document.createElement('li');
li.innerHTML = task + " <button> X </button>"
ul.appendChild(li);
// console.log(task);
addInput.value = '';
taskNumber.textContent = tasks;
li.querySelector('button').addEventListener('click', deleteTask);
}
const searchTask = (e) => {
const text = e.target.value.toLowerCase();
let lis = [...document.querySelectorAll('li')];
// lis = lis.filter(li => li.textContent.toLowerCase().includes(text));
// ul.textContent = '';
lis.forEach(li => li.textContent.toLowerCase().includes(text) ? li.classList.remove('hidden') : li.classList.add('hidden'));
}
const deleteTask = (e) => {
e.target.parentNode.remove();
tasks--;
taskNumber.textContent = tasks;
}
addButton.addEventListener('click', addTask)
searchInput.addEventListener('input', searchTask);
.hidden {
display: none;
}
<!DOCTYPE html>
<html>
<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">
<title>To-do app</title>
</head>
<body>
<form class="add" action=''>
<input type="text">
<button>Add</button>
</form>
<h1>Numbers of tasks: <span>0</span></h1>
<ul></ul>
<form class="search" action=''>
<input type="search" placeholder="search">
</form>
</body>
或者，有一個元素數(shù)組，您可以在其中添加 new li，在刪除時將其從該數(shù)組中刪除，并使用它來過濾搜索結果：
const addInput = document.querySelector('.add input');
const searchInput = document.querySelector('.search input');
const addButton = document.querySelector('.add button');
const ul = document.querySelector('ul');
var elements = [];
const taskNumber = document.querySelector('h1 span');
let tasks = 0;
const addTask = (e) => {
e.preventDefault();
tasks++;
let task = addInput.value;
if (task === '') return;
const li = document.createElement('li');
li.innerHTML = task + " <button id=" + tasks + "> X </button>"
li.id = tasks;
ul.appendChild(li);
// console.log(task);
addInput.value = '';
taskNumber.textContent = tasks;
li.querySelector('button').addEventListener('click', (e) => deleteTask(e, tasks));
elements.push(li);
}
const searchTask = (e) => {
const text = e.target.value.toLowerCase();
let lis = [...document.querySelectorAll('li')];
lis = elements.filter(li => li.textContent.toLowerCase().includes(text));
ul.textContent = '';
lis.forEach(li => ul.appendChild(li));
}
const deleteTask = (e, id) => {
e.target.parentNode.remove();
elements = elements.filter(el => {
return +el.id !== id;
})
tasks--;
taskNumber.textContent = tasks;
}
addButton.addEventListener('click', addTask)
searchInput.addEventListener('input', searchTask);
.hidden {
display: none;
}
<!DOCTYPE html>
<html>
<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">
<title>To-do app</title>
</head>
<body>
<form class="add" action=''>
<input type="text">
<button>Add</button>
</form>
<h1>Numbers of tasks: <span>0</span></h1>
<ul></ul>
<form class="search" action=''>
<input type="search" placeholder="search">
</form>
</body>
