微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

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 举报,一经查实,本站将立刻删除。