Wyszukiwanie nie działa prawidłowo

Cześć.
Robię aplikację w której dodajemy zadanie i z tej listy możemy wyszukiwać konkretne zadanie. Dodawanie i usuwanie mi działa bo wziąłem to z poprzednich przykładów. Wyszukiwanie mi działa nie do końca tak jak trzeba. Przy każdym z zadań jest przycisk z napisem "Usuń" i wyszukiwarka szukając nazwy zadania bierze też pod uwagę to co jest w znaczniku button. Zadania są w znacznikach li a w każdym li znajduje się button. Poniżej zamieszczam kod. Ktoś podpowie jak to rozwiązać?

const toDoList = [];

const form = document.querySelector('form');
const ul = document.querySelector('ul');
const taskNumber = document.querySelector('h1 span');
const listItems = document.getElementsByClassName('task');
const input = document.querySelector('input');
const inputSearch = document.querySelector('input.search');
// const inputSearch = document.getElementsByClassName('search');
 const removeTask = (e) => {
 e.target.parentNode.remove();
 const index = e.target.parentNode.dataset.key;
 toDoList.splice(index, 1)
 console.log(toDoList);
 taskNumber.textContent = listItems.length;
 renderList();
}
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 = "";
 const liItems = document.querySelectorAll('li.task').length;
 taskNumber.textContent = listItems.length;
 task.querySelector('button').addEventListener('click', removeTask);
}
const searchTask = (e) => {
    const searchText = e.target.value.toLowerCase()
    renderList()
    let tasks = [...listItems];
    console.log(tasks);
    tasks = tasks.filter(li => li.textContent.toLowerCase().includes(searchText))
    console.log(tasks);
    ul.textContent = "";
    tasks.forEach(li => ul.appendChild(li));
}
   const renderList = () => {
    ul.textContent = "";
    toDoList.forEach((toDoElement, key) => {
     toDoElement.dataset.key = key;
     ul.appendChild(toDoElement);
    })
   }
form.addEventListener('submit', addTask);
inputSearch.addEventListener('input', searchTask)

Wyszukiwanie mi działa nie do końca tak jak trzeba.

Czy możesz zdefiniować, co przez to rozumiesz?
Co (obecnie) robi twój kod, a co chciałbyś, żeby robił?

A w ogóle najlepiej sprowadzić problem do przykładu minimum?

Możesz też wrzucić działający przykład na http://jsfiddle.net i podesłać nam link.

Tak to działa https://jsfiddle.net/rk5j4u2b/

Jak dodam 3 taski na. aaa, bbb, ccc i wpiszę w dole pole wyszukiwania a to pokarze mi 1 task ale jak wpiszę słowo usuń to wyszuka mi wszystkie taski bo bierze do wyszukiwania też tekst z buttona a tak nie powinno być.

OK, rozumiem problem. Wydaje mi się, że wiem o co chodzi, ale teraz uciekam do lekarza.
Będę koło południa, wtedy postaram Ci się pomóc :)

Taka porada - może sam sobie do tego czasu poradzisz z zadaniem :)

Obecnie dodajesz elementy <LI>, w których się zawiera zarówno sam tekst, jak i przycisk. Zrób tak, żeby wewnątrz każdego <LI> dodać jeszcze <span>, w którym umieścisz tylko tekst, potem zamkniesz tego </span>, a przycisk już umieścisz za nim. A następnie wyszukiwanie zrób nie po <li> ale po wartościach <span>.

const toDoList = [];

const form = document.querySelector('form');
const ul = document.querySelector('ul');
const taskNumber = document.querySelector('h1 span');
const listItems = document.getElementsByClassName('task');
const input = document.querySelector('input');
const inputSearch = document.querySelector('input.search');

const removeTask = (e) =>
{
    e.target.parentNode.remove();
    const index = e.target.parentNode.dataset.key;
    toDoList.splice(index, 1);
    taskNumber.textContent = listItems.length;
    renderList();
}

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>";
    task.dataset.isVisible = true;
    task.dataset.text = titleTask.toLowerCase();
    toDoList.push(task);
    task.querySelector('button').addEventListener('click', removeTask);
    renderList(); 
    input.value = "";
}

const searchTask = (e) => 
{
    const searchText = e.target.value.toLowerCase()
    toDoList.forEach(x => x.dataset.isVisible = x.dataset.text.includes(searchText)); 
    renderList();
}

 const renderList = () =>
 {
    ul.textContent = "";
    const filteredList = toDoList.filter(x => x.dataset.isVisible == 'true');
    
    filteredList.forEach((toDoElement, key) =>
    {       
        toDoElement.dataset.key = key;
        ul.appendChild(toDoElement);
    });

    taskNumber.textContent = filteredList.length;
} 
   
form.addEventListener('submit', addTask);
inputSearch.addEventListener('input', searchTask)

Dziękuję o to mi chodziło.

@kost napisał Dziękuję o to mi chodziło.

To jeszcze możesz dać @neves "ptaszka" przy poście. Po pierwsze - dziękujesz w ten sposób autorowi, a po drugie oznaczasz ten wpis jako rozwiązujący problem. W przyszłości osoby przeglądające watek będą wiedziały, że temat jest ogarnięty, a najbardziej dzięki temu wpisowi :)

cerrato napisał(a):

@kost napisał Dziękuję o to mi chodziło.

To jeszcze możesz dać @neves "ptaszka" przy poście. Po pierwsze - dziękujesz w ten sposób autorowi, a po drugie oznaczasz ten wpis jako rozwiązujący problem. W przyszłości osoby przeglądające watek będą wiedziały, że temat jest ogarnięty, a najbardziej dzięki temu wpisowi :)

Ok. Zrobione.