当我使用事件委托删除项目时,它会给出一个错误

问题描述

当我使用事件委托来编辑我的元素时,应删除该元素,但是第一次触发按钮时,它可以正常工作,但之后会出现以下错误

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 (将#修改为@)