Показать сообщение отдельно
  #1 (permalink)  
Старый 18.04.2022, 19:47
Интересующийся
Отправить личное сообщение для bizunowvova Посмотреть профиль Найти все сообщения от bizunowvova
 
Регистрация: 18.04.2022
Сообщений: 15

Удаление списка в тудушке
Всем привет! начал писать тудушку по примеру из урока, уже половину сделал по-своему, но никак не пойму одну вещь. Добавил кнопку удалить элемент, работает только для новых элементов. Для старых, которые хранятся в HTML документе, даже в консоль лог по нажатию ничего не выдает. Помогите, пожалуйста) так же, если где-то еще найдется косяк - принимаю всю критику
<!DOCTYPE html>
<html>
    <head>
        <title>Приложение To-Do List</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div id="todo">
            <h1>Мой список дел <i id="pensil" class="fas fa-pencil-alt"></i></h1>
            <input type="text" placeholder="Добавить список">
            <button type="text">Добавить</button>
            <ul class="todos">
                <li>
                    <span calss="todo-text">
                        Прикрутить добавление по ентер
                    </span>
                    <span class="todo-trash">
                        <button class="trash" type="text"></button>
                    </span>
                </li>
                <li>
                    <span calss="todo-text">
                        добавить кнопку к инпут
                    </span>
                    <span class="todo-trash">
                        <button class="trash" type="text"></button>
                    </span>
                </li>
            </ul>
            <div id="buttons">
                <button class="save">Сохранить</button>
                <button class="clear">Очистить</button>
                <button class="showTips">Справка</button>
            </div>
        </div>
        <div id = "overlay">
            <a href="javascript:void(0)" class="closeTips">&times;</a>
            <ul class="tips">
                <li>Чтобы спрятать или показать поле ввода, кликните на карандаш</li>
                <li>Для добавления списка дел напишите текст в поле ввода и нажмите Ввод</li>
                <li>Чтобы удалить один пункт, наведите на него и нажмите на значок корзины</li>
                <li>Чтобы удалить все списки дел, нажмите "Очистить"</li>
                <li>Нажмите "Сохранить", чтобы сохранить список дел на потом</li>
            </ul>
        </div>
        <script type="text/javascript" src="index.js"> </script>
    </body>
</html>


'use strict';

function ToDo() {
    const input = document.querySelector("input[type='text']");
    const inputBtn = document.querySelector("button[type='text']");
    const ul = document.querySelector("ul.todos");
    // const delBtn = document.querySelector("input.trash");
    // const saveButton = document.querySelector("button.save");
    // const clearButton = document.querySelector("button.clear");
    // const showTipsButton = document.querySelector("button.showTips")
    // const closeTipsButton = document.querySelector("a.closeTips");
    // const overlay = document.querySelector("#overlay");

    function todoAdd() {
        const li = document.createElement('li');
        const textSpan = document.createElement("span");
        textSpan.classList.add("todo-text");
        const newTodo = input.value;
        textSpan.append(newTodo);

        const deleteButton = document.createElement('span');
        deleteButton.classList.add("todo-trash");
        const button = document.createElement("button");
        button.classList.add("trash");
        deleteButton.appendChild(button);

        ul.appendChild(li).append(textSpan, deleteButton);
        input.value = " ";
        listenDeleteTodo(deleteButton);
    }

    inputBtn.addEventListener('click', (clicked) => {
        if (clicked && input.value.length != 0) {
            todoAdd();
        }
    })
    
    function listenDeleteTodo(element) {
        element.addEventListener("click", (event) => {
            element.parentElement.remove();
            event.stopPropagation();
            console.log('click');
        });
    }
}

document.addEventListener("DOMContentLoaded", ToDo);


CSS:
Код:
button.trash::after {
    content: "Del";
}
Ответить с цитированием