Witam. Mam taki problem z todolistą. Kiedy wyszukuję jakąś frazę to pasujące zadanie zmienia kolor na czerwony i to wszystko działa ale wyszukiwarka uwzględnia także tekst z przycisku "usuń" a tego nie chcę i nie mogę sobie z tym poradzić.
<!DOCTYPE html>
<html lang="pl">
<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>Lista zadań</title>
</head>
<body>
<form action="">
<input type="text">
<button>Dodaj zadanie</button>
</form>
<input class="search" type="text"><span> wyszukiwarka</span>
<h1>Liczba zadań: <span>0</span></h1>
<ul></ul>
<script src="main.js"></script>
</body>
</html>
const toDoList = [];
const input = document.querySelector("input")
const inputSearch = document.querySelector(".search")
const ul = document.querySelector("ul")
const form = document.querySelector("form");
const taskNumber = document.querySelector("h1 span");
const listItems = document.getElementsByClassName("task");
const searchTask = (e) => {
const searchText = e.target.value.toLowerCase();
const find = toDoList.filter(li => li.textContent.toLowerCase().includes(searchText))
toDoList.forEach(li => li.style.color = "black")
find.forEach(li => li.style.color = "red")
if (searchText === "") {
toDoList.forEach(li => li.style.color = "black")
};
}
const removeTask = (e) => {
const index = e.target.parentNode.dataset.key;
toDoList.splice(index, 1);
renderList()
taskNumber.textContent = listItems.length;
}
const addTask = (e) => {
e.preventDefault();
const titleTask = input.value;
if (titleTask === "") return;
const task = document.createElement("li");
task.className = "task";
task.innerHTML = titleTask + "<button>Usuń</button>";
toDoList.push(task);
renderList()
ul.appendChild(task);
input.value = "";
taskNumber.textContent = listItems.length;
task.querySelector("button").addEventListener("click", removeTask);
}
const renderList = () => {
ul.textContent = "";
toDoList.forEach((toDoElement, key) => {
toDoElement.dataset.key = key;
ul.appendChild(toDoElement);
})
}
form.addEventListener("submit", addTask)
inputSearch.addEventListener("input", searchTask)