Проблема с удалением элементов в проекте списка дел

#javascript

Вопрос:

У меня проблема с функцией удаления. Я нахожусь в точке, где я могу удалить только одну строку, прежде чем снова нажать кнопку отправки. Кажется, я могу удалить только первый абзац, который был отправлен. Похоже, что EventListener применяется только к первой строке. Нужен ли мне здесь цикл?

Вот часть моего кода:

 // Manipulation with DOM

const submitButton = document.getElementById('submit-btn');
const inputText = document.getElementById('input-text');
const showcaseUlList = document.getElementById('showcase-ul-list');
const showcaseLilist = document.getElementById('showcase-li-list');

// Submit event listener

submitButton.addEventListener('click', submitAddToDo);

// Submit function

function submitAddToDo(){
    // Checking if the input is not empty
    if(inputText.value === ''){
        alert("You've must fill the input field");
        return;
    }

    // Create div
    const divToDo = document.createElement('div');
    divToDo.classList.add('showcase-li-list');

    // Create li
    const liToDo = document.createElement('li');
    
    // Create button(check)
    const checkToDo = document.createElement('button');
    checkToDo.innerHTML = '<i class="fas fa-check-circle id="check-checked"></i>';

    // Create paragraph
    const pToDo = document.createElement('p');
    let inputValue = inputText.value;
    pToDo.innerHTML = inputValue;

    // Create i(trash)
    const trashToDo = document.createElement('button');
    trashToDo.classList.add('trash');
    trashToDo.innerHTML = '<i class="fas fa-trash trash" id="trash-delete"></i>'

    
    
    // All childs appends
    showcaseUlList.appendChild(divToDo);
    divToDo.appendChild(liToDo);
    liToDo.appendChild(checkToDo);
    liToDo.appendChild(pToDo);
    liToDo.appendChild(trashToDo);

    // Clear input field and delete show line
    inputText.value = '';
    showcaseLilist.remove();

    // Remove task
    const trashDelete = document.getElementById('trash-delete');
    trashDelete.addEventListener('click', removeTask);
    const removeParent = trashDelete.parentElement.parentElement.parentElement;
    function removeTask(){
        removeParent.remove();
    }
}

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512- 4zCK9k qNFUR5X cKL9EIR ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<body>
    <div class="container">

        <!-- Header - welcome section -->
        <header class="welcome-section">
            <div class="welcome-text">
                <h1>Welcome,</h1>
                <p>Here you can make your own task manager</p>
                <p class="text-xs">feel free to try it out!</p>
            </div>
            <img src="../IMG/todo-header.png" alt="" class="header-image">
        </header>

        <!-- Input section -->
        <section class="input-section">
            <p class="text-lg">Fill your task manager with tasks:</p>
            <input type="text" id="input-text" class="input-text">
            <button class="btn-lg" id="submit-btn">Submit</button>
        </section>

        <!-- Showcase -->
        <div class="showcase">
            <ul id="showcase-ul-list">
                <div class="showcase-li-list" id="showcase-li-list">
                    <li>
                        <button><i class="fas fa-check-circle check" id="check-checked"></i></button>
                        <p>Fill your task manager</p>
                        <button class="trash"><i class="fas fa-trash" id="trash-delete"></i></button>
                    </li>
                </div>
            </ul>
        </div>
    </div>
</body>

Развернуть фрагмент

Ответ №1:

Используйте trashToDo.addEventListener вместо trashDelete.addEventListener . Также вам не нужно получать removeParent . Используйте divToDo.remove(); внутри removeTask .

Проблема с вашим кодом связана document.getElementById('trash-delete') с. getElementById всегда будет найден first элемент с идентификатором trash-delete . И вы назначаете событие только этому первому элементу. Поэтому он всегда удаляет первый для вас.

 // Remove task
// const trashDelete = document.getElementById('trash-delete'); <-- Remove this line
trashToDo.addEventListener('click', removeTask);
// Remove below line.
// const removeParent = trashDelete.parentElement.parentElement.parentElement;
function removeTask() {
    divToDo.remove();
}

1. Большое вам спасибо! Итак, проблема заключалась в том, что я использовал .getElementById который выбирает только первый элемент с этим идентификатором?

2. ДА. Более того, у вас уже есть требуемые объекты элементов в вашем коде, поэтому вам не нужно получать их с getElementById помощью или с parentElement.parentElement помощью etc.