Having an issue with deleting items in to do list project

I’m having an issue with the delete function. I’m at the point where I can remove only one line before pushing the submit button again. It seems that I can remove only the first paragraph that was submitted. It feels like eventListener applies only for the first line. Do I need a loop here?

Here is some of my code:

// 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>

Answer

Use trashToDo.addEventListener instead of trashDelete.addEventListener. Also you do not need to get removeParent. Use divToDo.remove(); inside removeTask.

Issue with your code is due to document.getElementById('trash-delete'). getElementById will always find first element with id trash-delete. And you are assigning event to that first element only. So it always deletes first one for you.

// 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();
}

Advertisement

Answer