Skip to content

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");
    // Create div
    const divToDo = document.createElement('div');
    // 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.innerHTML = '<i class="fas fa-trash trash" id="trash-delete"></i>'
    // All childs appends
    // Clear input field and delete show line
    inputText.value = '';
    // Remove task
    const trashDelete = document.getElementById('trash-delete');
    trashDelete.addEventListener('click', removeTask);
    const removeParent = trashDelete.parentElement.parentElement.parentElement;
    function removeTask(){
<link rel="stylesheet" href="" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <div class="container">
        <!-- Header - welcome section -->
        <header class="welcome-section">
            <div class="welcome-text">
                <p>Here you can make your own task manager</p>
                <p class="text-xs">feel free to try it out!</p>
            <img src="../IMG/todo-header.png" alt="" class="header-image">
        <!-- 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>
        <!-- Showcase -->
        <div class="showcase">
            <ul id="showcase-ul-list">
                <div class="showcase-li-list" id="showcase-li-list">
                        <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>


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() {