javascript - 问题迭代节点列表
问题描述
我正在用普通的香草 jS 创建一个简单的待办事项应用程序,但是在将事件侦听器分配给预填充的数据时遇到问题。这很奇怪,因为我可以为它们分配一个按钮,但事件监听器不起作用。
当我创建新的列表项并将事件侦听器分配给按钮时,单击删除列表项没有问题。
在这上面花了一个半小时,似乎无法弄清楚。下面的代码块是我的html页面的onload函数。我预先填充了 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)
});
}
解决方案
推荐阅读
- python - 从两个一维向量 a、b 和 A[i,j] 创建一个布尔数组 A,如果 a[i]==b[j]
- c++ - 如何为对象中的数据动态赋值?
- c++ - C++ 语法中的函数指针
- python - 是否有将两个列表中的匹配索引对连接到二维列表中的功能?
- python - Python xml树结构
- python - PCA 如何计算“sklearn”中的转换版本?
- sql - 在 SQL 中透视和取消透视具有多列和多行的表
- python-3.x - 而在 py3 中的 nltk 中的 cicle
- variable-assignment - 在 Firebird 的 SQL 编辑器上下文中分配变量
- phpexcel - PHPSpreadsheet 加载 CSV 设置默认数据格式