How do I get the content of another child from a child element of a div?

I am making a to do list app and when the user presses the delete button, the list item should be removed from the list on the page but it should also be removed from the tasks list variable, which is a list of objects, containing a task and done property.

The delete button can be used access its parent element using btn.parentElement but when I try to use this to get to another child element in that parent element (div) it does not work as it is returned as [object HTMLLIElement].

The child element I want to access contains the name of the task so I could use that to delete the list item from the tasks list, however if I did this I would have to loop through it and delete the 1st time the task appears. But this may delete the wrong task if there are multiple tasks with the same task name.

How do I fix this?

var tasks = [];

var oneTask = false;

// html elements
const form = document.querySelector("form");
const formInput = document.querySelector(".task-input");
const formSubmit = document.querySelector(".submit");

const tasksHTML = document.querySelector(".tasks");

var deleteHTML = document.querySelectorAll(".delete");
console.log(deleteHTML);

// objects
function Task(task) {
    this.task = task;
    this.done = false;
}

// event listeners
form.addEventListener("submit", () => {
    console.log("form submitted");
    tasks[tasks.length] = new Task(formInput.value);
    console.log(tasks);
    formInput.value = "";
    addItem();

    if (oneTask === false) {
        oneTask = true;
        tasksHTML.classList.add("background");
    }

    deleteHTML = document.querySelectorAll(".delete");
    console.log(deleteHTML);

    deleteBtn();
});

// functions

function addItem() {
    let task = tasks[tasks.length - 1];
    tasksHTML.insertAdjacentHTML(
        "beforeend",
        `
            <li class="task">
                <div class="left">
                    <input type="checkbox" class="box" />
                    <p class="content">${task.task}</p>
                </div>
                <button class="btn delete">
                    <i class="fa-solid fa-trash-can"></i>
                </button>
            </li>
        `,
    );
}

function deleteBtn() {
    deleteHTML.forEach(btn => {
        btn.addEventListener("click", () => {
            console.log("delete");
            btn.parentElement.style.display = "none";
            let p = document.querySelector(`${btn.parentElement} .content`);
            console.log(p);
            // let index = tasks.indexOf()

            console.log(tasks.length, "length");

            if (tasks.length < 1) {
                console.log("remove background");
                tasksHTML.classList.remove("background");
            }
        });
    });
}

Answer

Change

let p = document.querySelector(`${btn.parentElement} .content`);

let p = btn.parentElement.querySelector('.content");

You already have a reference to the element, you don’t need to put it into a selector.

Advertisement

Answer