问题描述
当我使用事件委托来编辑我的元素时,应删除该元素,但是第一次触发按钮时,它可以正常工作,但之后会出现以下错误:
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 (将#修改为@)