多个按钮事件 = 未捕获的类型错误：无法读取未定义的属性'remove'

Question

我想在每个Delete Button(1,2,3(上添加一个EventListener，但我得到了一个未定义的错误"添加"；空的，有什么想法吗？因此，如果我点击DELETE按钮，它将弹出确认窗口

index.html

<div id="confirmWindow" class=" hidden">
<p>Are you sure want to delete?</p>
<button class="buttonYes">Yes</button>
<button class="buttonNo">No</button>
</div>
<button class="" id="trashIcon">Delete 1</button>
<div id="confirmWindow" class=" hidden">
<p>Are you sure want to delete?</p>
<button class="buttonYes">Yes</button>
<button class="buttonNo">No</button>
</div>
<button class="" id="trashIcon">Delete 2</button>
<div id="confirmWindow" class=" hidden">
<p>Are you sure want to delete?</p>
<button class="buttonYes">Yes</button>
<button class="buttonNo">No</button>
</div>
<button class="" id="trashIcon">Delete 3</button>

app.js

const deleteButton = document.querySelectorAll('#trashIcon');
const confirmWindow = document.querySelectorAll('#confirmWindow');
const buttonYes = document.querySelectorAll('.buttonYes');
const buttonNo = document.querySelectorAll('.buttonNo');

const openWindow = function (){
confirmWindow.classList.remove('hidden');
deleteButton.classList.add('hidden');
}
const closeDeleteWindow = function (){
confirmWindow.classList.add('hidden');
deleteButton.classList.remove('hidden');
}
for (let i=0; i < deleteButton.length; i++){
deleteButton[i].addEventListener('click', openWindow);
}
for (let i=0; i < buttonNo.length; i++){
buttonNo[i].addEventListener('click', closeDeleteWindow);
}

Answer 1

id对于HTML元素应该是唯一的。使用类代替id

<style>.hidden {display: none;}</style>
<div id="confirmWindow1" class="confirmWindow1 hidden">
<p>Are you sure want to delete?</p>
<button class="buttonYes">Yes</button>
<button id="buttonNo1" class="buttonNo">No</button>
</div>
<button class="trashIcon" id="trashIcon1">Delete 1</button>
<div id="confirmWindow2" class="confirmWindow2 hidden">
<p>Are you sure want to delete?</p>
<button class="buttonYes">Yes</button>
<button id="buttonNo2" class="buttonNo">No</button>
</div>
<button class="trashIcon" id="trashIcon2">Delete 2</button>
<div id="confirmWindow3" class="confirmWindow3 hidden">
<p>Are you sure want to delete?</p>
<button class="buttonYes">Yes</button>
<button id="buttonNo3" class="buttonNo">No</button>
</div>
<button class="trashIcon" id="trashIcon3">Delete 3</button>


const deleteButton = document.querySelectorAll('.trashIcon');
const confirmWindow = document.querySelectorAll('.confirmWindow');
const buttonYes = document.querySelectorAll('.buttonYes');
const buttonNo = document.querySelectorAll('.buttonNo');

const openWindow = function (obj){
document.querySelectorAll('.confirmWindow'+obj.id.replace('trashIcon',''))[0].classList.remove('hidden');
obj.classList.add('hidden');
}
const closeDeleteWindow = function (obj){
document.querySelectorAll('.confirmWindow'+obj.id.replace('buttonNo',''))[0].classList.add('hidden');
document.querySelectorAll('#trashIcon'+obj.id.replace('buttonNo',''))[0].classList.remove('hidden');
}
for (let i=0; i < deleteButton.length; i++){
deleteButton[i].addEventListener('click', function(){
openWindow(this);
});
}
for (let i=0; i < buttonNo.length; i++){
buttonNo[i].addEventListener('click', function(){
closeDeleteWindow(this);
});
}