如何解决当我使用事件委托删除项目时,它会给出一个错误
当我使用事件委托来编辑我的元素时,应删除该元素,但是第一次触发按钮时,它可以正常工作,但之后会出现以下错误:
todo.html:271未捕获的TypeError:无法读取null的属性'removeChild'
在removeItem(todo.html:271)
在HTMLLIElement。(todo.html:230)
这是我的下面的代码:
//selector
const btn = document.querySelector('.add_item');
const input = document.getElementById('serch_Box');
const todoList = document.querySelector('.todos_list');
const todostore = [];
let index = 0;
//Event Listner
btn.addEventListener('click',addTodo);
document.addEventListener('keypress',event = {
if(event.keyCode === 13 || event.which ===13){
addTodo();
}
})
function handle(itemname){
const todoItem = document.querySelectorAll('.todo_item');
todoItem.forEach(cur = {
cur.addEventListener('click',e = {
if(e.target.className === "edit"){
input.value = itemname;
removeItem(cur);
}
})
})
}
//function
function addTodo(){
//get input
let getInput = input.value;
//add todo item into dom
addItem(getInput,index);
index ++;
//clear input
input.value = " ";
//handle
handle(getInput);
}
//add todo item into dom
function addItem(todo,id){
let markup = `<li class="todo_item" id ="${id}"<div class="todo"${todo}</div<div class="status"<span class="edit"<i
class="fas fa-pencil-alt"</i</span<span class="complete"<i
class="far fa-check-circle"</i</span<span class="cancel"<i
class="far fa-times-circle"</i</span</div</li`;
todoList.insertAdjacentHTML('beforeend',markup);
todostore.push(todo);
console.log(todostore);
}
function removeItem(cur) {
let parent = cur.parentNode;
parent.removeChild(cur);
}
我该如何解决?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。