Удаление элемента из списка методами класса

Question

Прошу о помощи. У меня никак не получается удалить элемент из корзины, когда я пиши с помощью классов. Не получается связать методы и видимо еще правильно сослаться на нужный контейнер. Перепробовал всё, что мог. Мне надо, чтобы кнопка "Удалить" работала и всё. Новичок и поэтому туплю. Особенно с классами. Если еще сможете посоветовать не знаю статью или видео-курс по работе с классами и с массивами для хранения данных (то есть для средних и сложных проектах, а не простых задачках, буду очень благодарен. Вот мой код (не работает только кнопка "удалить" в корзине):

class ToDoItem{
    constructor(text){
        this.text = text;
    }
}

class ToDoList{
    constructor(){
        this.bindEvents();
    }

    bindEvents(){
        $('#btn').on('click', () => this.createList());
        $('#input-value').on('keydown', (e) => {
            if(e.key === 'Enter'){
                this.createList();
            }
        })
        // $('.trashLists').on('click', 'del-trash', () => this.deleteFromTrash(elList));
        this.setupModal();
    }

    setupModal(){
        $('.trash').on('click', function(){
            $('.trash-modal').fadeIn();
            event.stopPropagation(); 
        })

        $('body').on('click', function(event){
            $('.trash-modal').fadeOut(); 
        })

        $('.trash-modal').on('click', function(){
            event.stopPropagation();
        })
    }

    createList(){
        const createList = $('#input-value').val().trim();
        if (createList) {
            const newTask = new ToDoItem(createList);
            this.renderTask(newTask);
            $('#input-value').val('');
        }

    }

    renderTask(task){
        const taskItem = $(`
            <li class='list-container'>
                <span class='elList'>${task.text}</span>
                <span class='del-btn'>В корзину</span>
            </li>
        `);

        taskItem.find('.del-btn').on('click', () => this.movingToTheTrash(taskItem));

        $('#item-list').prepend(taskItem);
    }

    movingToTheTrash(taskItem){
        const copyList = taskItem.clone();
        const trashItem = `
            <li class='trash-items'>
                <span class='del-trash'>Удалить</span>
            </li>
        `;
        copyList.append(trashItem);
        copyList.find('.del-btn').remove();
        $('.trashLists').append(copyList);
        taskItem.fadeOut(200, () => {
            $(this).remove();
        })

        // trashItem.find('.list-container').on('click', '.del-trash', (event) => this.deleteFromTrash(event));
    }

    deleteFromTrash(){

        $('.trashLists').on('click', 'del-trash', () => {

            $(this).closest('.list-container').remove();
        })

        // const trashItem = $(event.currentTarget).closest('.trash-items');
        // trashItem.fadeOut(200, () => {
        //     trashItem.remove(); 
        // });
        // $('.trash-container').find('.del-trash').closest('.list-container').fadeOut(200, function() {
        //     $(this).remove()
        // });

    }
}

$(document).ready(() => {
    new ToDoList();
})

.wrapper {
    height: 100vh;
}
.div {
    display: flex;
    flex-direction: column;
}
.del-btn, .del-trash {
    font-size: 12px;
    color: red;
    margin-left: 5px;
    cursor: pointer;
    border: 1px solid red;
    padding: 0 2px;
}
.list-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    border: 1px grey solid;
    padding: 0 5px;
    margin-top: 10px;
}
.btn {
    cursor: pointer;
}
.trash {
    padding: 2px 10px;
    margin: 10px 0;
    border: 1px black solid;
    width: fit-content;
    cursor: pointer;
    transition: ease 100ms;
}
.trash:hover {
    background-color: grey;
    transition: ease 100ms;
}
.trash-modal {
    display: none;
    background: rgba(128, 128, 128, 0.8);
    position: fixed;
    width: 500px;
    height: 400px;
}
.trash-container {
    padding: 0 10px;
}
li {
    list-style: none;
}
.trash-items {
    display: flex;
    align-items: center;
}

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<div class="wrapper">
    <div class="trash">Trash</div>
    <div class="trash-modal">
        <div class="trash-container">
            <h4>Корзина</h4>
            <ul class="trashLists"></ul>
        </div>
    </div>
    <input type="text" id="input-value">
    <button id="btn" class="btn">Добавить</button>
    <div id="item-list" class="div"></div>
</div>

Answer 1

Вот решение, если кому-нибудь будет интересно

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <title>Document</title>
    <style>
        .wrapper {
            height: 100vh;
        }
        .div {
            display: flex;
            flex-direction: column;
        }
        .del-btn, .del-trash {
            font-size: 12px;
            color: red;
            margin-left: 5px;
            cursor: pointer;
            border: 1px solid red;
            padding: 0 2px;
        }
        .list-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 300px;
            border: 1px grey solid;
            padding: 0 5px;
            margin-top: 10px;
        }
        .btn {
            cursor: pointer;
        }
        .trash {
            padding: 2px 10px;
            margin: 10px 0;
            border: 1px black solid;
            width: fit-content;
            cursor: pointer;
            transition: ease 100ms;
        }
        .trash:hover {
            background-color: grey;
            transition: ease 100ms;
        }
        .trash-modal {
            display: none;
            background: rgba(128, 128, 128, 0.8);
            position: fixed;
            width: 500px;
            height: 400px;
        }
        .trash-container {
            padding: 0 10px;
        }
        li {
            list-style: none;
        }
        .trash-items {
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="trash">Trash</div>
        <div class="trash-modal">
            <div class="trash-container">
                <h4>Корзина</h4>
                <ul class="trashLists"></ul>
            </div>
        </div>
        <input type="text" id="input-value">
        <button id="btn" class="btn">Добавить</button>
        <div id="item-list" class="div"></div>
    </div>
    
    <script>
        class ToDoItem{
            constructor(text){
                this.text = text;
            }
        }

        class ToDoList{
            constructor(){
                this.bindEvents();
            }

            bindEvents(){
                $('#btn').on('click', () => this.createList());
                $('#input-value').on('keydown', (e) => {
                    if(e.key === 'Enter'){
                        this.createList();
                    }
                })
                
                $('.trashLists').on('click', '.del-trash', (event) => this.deleteFromTrash(event));
                // $('.list-container').on('click', 'del-trash', () => this.deleteFromTrash());
                this.setupModal();
            }

            setupModal(){
                $('.trash').on('click', function(){
                    $('.trash-modal').fadeIn();
                    event.stopPropagation(); 
                })
            
                $('body').on('click', function(event){
                    $('.trash-modal').fadeOut(); 
                })
            
                $('.trash-modal').on('click', function(){
                    event.stopPropagation();
                })
            }

            createList(){
                const createList = $('#input-value').val().trim();
                if (createList) {
                    const newTask = new ToDoItem(createList);
                    this.renderTask(newTask);
                    $('#input-value').val('');
                }

            }

            renderTask(task){
                const taskItem = $(`
                    <li class='list-container'>
                        <span class='elList'>${task.text}</span>
                        <span class='del-btn'>В корзину</span>
                    </li>
                `);

                taskItem.find('.del-btn').on('click', () => this.movingToTheTrash(taskItem));
                
                $('#item-list').prepend(taskItem);
            }

            movingToTheTrash(taskItem){
                const copyList = taskItem.clone();
                const trashItem = `
                    <li class='trash-items'>
                        <span class='del-trash'>Удалить</span>
                    </li>
                `;
                copyList.append(trashItem);
                copyList.find('.del-btn').remove();
                $('.trashLists').append(copyList);
                taskItem.fadeOut(200, () => {
                    taskItem.remove();
                })
            }

            deleteFromTrash(event){

                const $trashList = $(event.currentTarget).closest('.list-container'); // находим элемент, который нужно удалить
                $trashList.fadeOut(200, () => {
                    $trashList.remove(); // удаляем элемент из DOM
                });

                // const $trashList = $(event.currentTarget).closest('.trash-items');
                // $(this).remove();
            }
        }

        $(document).ready(() => {
            new ToDoList();
        })
    </script>
</body>
</html>

Изменение в bindEvents:

$('.trashLists').on('click', '.del-trash', (event) => this.deleteFromTrash(event));

Изменение в методе deleteFromTrash:

      deleteFromTrash(event){

                const $trashList = $(event.currentTarget).closest('.list-container'); // находим элемент, который нужно удалить
                $trashList.fadeOut(200, () => {
                    $trashList.remove(); // удаляем элемент из DOM
                });

                // const $trashList = $(event.currentTarget).closest('.trash-items');
                // $(this).remove();
            }
        }

БЛОГ НА HUSL

Удаление элемента из списка методами класса

Ответы (1 шт):