无法删除eventlistener

问题描述 投票:0回答:1

我为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>

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

// 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);
        });
javascript html
1个回答
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);

© www.soinside.com 2019 - 2024. All rights reserved.