JS - pobranie tekstu z elementu tablicy

Question

Cześć! Mam obecnie problem z wyszukiwarką w ramach to do list'y, którą tworzę.

Każdy dodany przez użytkownika element listy ma wewnątrz button (każdy li to element tablicy toDoList):

<li class="task" data-key="0"> Task 1 <button> delete</button> </li>

Zrobiłam wyszukiwarkę task'ów, która filtruje te, które zawierają wpisaną frazę:

const searchTask = (e) => {

const searchText = e.target.value.toLowerCase();

const filterTasks = toDoList.filter(liElement => {return liElement.innerText.toLowerCase().includes(searchText)

})

ul.textContent = "";

filterTasks.forEach(li => {

ul.appendChild(li)

})}

Problem jest taki, że wyszukiwarka nie łapie jedynie treści wpisanej przez użytkownika - czyli konkretny task, ale też tekst wewnątrz button'a - czyli 'delete'. Jak sprawić, aby można było filtrować elementy tablicy toDoList metodą filter() po frazie wpisanej przez użytkownika? Jak wyłączyć treść buttona z wyszukiwarki?

Cały kod:

https://pastebin.com/ZzTtR3un

Comments

Wpisywanie w innerHTML elementu html to średni pomysł. Lepiej stworzyć ten element (createElement) i dodać do go do drzewa (appendChild). Tu masz link z przykładem.

Jeśli pomimo to chcesz to wykonać w ten sposób to na przykład zamknij nazwę tego nowego zadania w span i później pobieraj tę nazwę z tego elementu.