jq点击添加删除节点

Question

第一次点击没有报错第二次点击就报错了，懂得大神们帮着看一下图片中的代码错误提示。
$('#div1').on('mousedown',function(ev){
// ev = ev || event;

            var disX = event.clientX - this.offsetLeft;
            var disY = event.clientY - this.offsetTop;

            // 动态创建I节点
            var oNewI = document.createElement('i');
            oNewI.className = 'drag_bor';
            this.parentNode.insertBefore(oNewI, this);
            $('#div1').on('mouseup',function(){
                console.log(oNewI.parentNode);
                oNewI.parentNode.removeChild(oNewI);
                
            });    
        });

Answer 1

Mouseup事件重复绑定导致。
第一次点击的时候，触发mousedown,并绑定了mouseup。当松手的时候触发了mouseup。

第二次点击的时候，触发mousedown，又绑定了一个mouseup，松手时候触发了先第一次绑定的mouseup，再触发第二次绑定的mouseup。第一次的mouseup再次执行，此时第一次的作用域内oNewI已经被remove过一次了导致没有parentNode了。就console出了null。

正确做法有两种

1. 在mouseup内，增加解绑操作

$('div1').off('mouseup')

1. 将mouseup的绑定放在mousedown外面，并将新建的dom的定义，挪到全局。

Answer 2

说的很明白: 要删除的节点不是此节点的子节点
你可以使用 oNewI.parentNode.removeChild(oNewI) 来移除节点

Answer 3

用了jq，你可以使用jq的remove()来移除节点。如果你要用原生js,那么你应该知道removeChild()方法是删除了节点之后再添加删除并不是同一个节点，所以在使用这个方法的时候，增加一个判断，进行容错处理。

if(oNewI.parentElement && oNewI){
    oNewI.parentElement.removeChild(oNewI);
}