我为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);
});
如果将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);