Question

我为TODO列表编写了一个JS代码。

我打算通过删除节点并更改父节点来删除节点并将其移动到新位置。现在，在我更改父级之后，我想删除事件侦听器，因为我打算使用恢复按钮来更改父级，就像在初始情况下一样。我该怎么做？

初始正文：JS代码的HTML表示应如下所示：

<div class="databox col s6 offset-s1 waves-effect">
    <p class="checkglyph1 checkglyph2">Task no 1</p>        
    <a>
        <i class="material-icons checkglyph checkglyph glyph1 checkglyph2 glyphcolor">check</i>
    </a>
</div>

我向标记添加一个事件监听器，将其移动到新的父级＆＃39; .side1＆＃39;。但是使用removeeventlistener需要一个鼠标事件和一个函数。我希望删除eventlistener。 JS

＆＃13;

// creates a glyph text to look like tick button
	// here glyph is the <i> tag I referred in the html given above
	var node1 = document.createTextNode("check");
	newa.appendChild(newglyph);
	
	newglyph.append(node1);
	newglyph.addEventListener('click', function(event) {
            this.classList.toggle("checkglyph1");
            //removes the check glyph to replace it with replay glyph(I intend to use this replay button to move this task to initial parent)
            newglyph.removeChild(node1);
            var node2 = document.createTextNode("replay");

            this.append(node2);
            this.classList.add("returntomain");
            newpar.classList.toggle("checkglyph1");
    	    completedtasks.appendChild(newdiv);    
    	    console.log(newglyph);
    	
            // console.log(i);
        });

＆＃13;

Answer 1

如果将eventHandler放入函数中，您将能够删除它。

function eventListner(event) {
        this.classList.toggle("checkglyph1");
        newglyph.removeChild(node1);
        var node2 = document.createTextNode("replay");

        this.append(node2);
        this.classList.add("returntomain");
        newpar.classList.toggle("checkglyph1");
        completedtasks.appendChild(newdiv);    
        console.log(newglyph);

};

var node1 = document.createTextNode("check");
newa.appendChild(newglyph); 
newglyph.append(node1);
newglyph.addEventListener('click', eventListener)

然后删除它： newglyph.removeEventListener('click', eventListener);

无法删除eventlistener

1 个答案: