Question

我正在用普通香草jS创建一个简单的todo应用程序，但是在将事件侦听器分配给预先填充的数据时遇到了问题。很奇怪，因为我可以给他们分配一个按钮，但是事件监听器不起作用。

当我创建新的列表项并将eventlistener分配给按钮时，单击即可删除列表项。

为此花了一个半小时，似乎无法弄清楚。下面的代码块是我的html页面上加载的函数。我已经预先填充了4个列表项，并且此功能已成功将按钮添加到每个列表项，但未添加事件侦听器。

function applyButton(){

 var getListObjects = document.querySelectorAll("li")

for(var i = 0; i< getListObjects.length; i++){

var node2 = document.createElement('BUTTON')
var textnode2 = document.createTextNode('Delete')
node2.appendChild(textnode2)

getListObjects[i].appendChild(node2)
var x = getListObjects[i]

x.querySelector('button').addEventListener('click', function(){
    x.querySelector('button').parentNode.parentNode.removeChild(x)  
})
}
  }

下面的代码获取输入值，并创建一个带有删除按钮的新列表项，该按钮成功具有事件侦听器以删除该列表项。我试着用其他功能逐字复制此词，但无济于事。下面的代码可以按预期工作。

var newNoteValue     = document.getElementById('newNote').value
var addItemButton = document.getElementById('addItem')
var onEnter = document.getElementById('newNote')    

addItemButton.addEventListener('click', function(){
var item = document.getElementById('newNote').value
var node = document.createElement("LI")
var textnode = document.createTextNode(item)

node.appendChild(textnode)
document.getElementById('list-body').appendChild(node)

var node2 = document.createElement('BUTTON')
var textnode2 = document.createTextNode('Delete')
node2.appendChild(textnode2)
node.appendChild(node2)

node2.addEventListener('click', function(){
    node2.parentNode.parentNode.removeChild(node)

});

document.getElementById('newNote').value = ''

}）;

编辑-基于建议答案的解决方案

function applyButton(){

var getListObjects = document.querySelectorAll("li")

for(var i = 0; i< getListObjects.length; i++){

var node2 = document.createElement('BUTTON')
var textnode2 = document.createTextNode('Delete')
node2.appendChild(textnode2)

getListObjects[i].appendChild(node2)
addEventToButton2(getListObjects[i])

}
}

function addEventToButton2(currentListItem){
let y = currentListItem.querySelector('button')
y.addEventListener('click', function(){
    y.parentNode.parentNode.removeChild(currentListItem)    
});
}

通过节点列表进行迭代

0 个答案: