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 >
<div >
<input type="checkbox" />
<p >${task.task}</p>
</div>
<button >
<i ></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");
}
});
});
}
CodePudding user response:
Change
let p = document.querySelector(`${btn.parentElement} .content`);
to
let p = btn.parentElement.querySelector('.content");
You already have a reference to the element, you don't need to put it into a selector.