Javascript 对按钮数组执行Dom事件时出现问题

我正在尝试创建一个可视元素，您可以在其中添加和删除2个输入字段和一个p元素，而我找到了一种方法，在不按时间顺序删除它们的情况下，最后一个div将不会被删除并打印“无法删除未定义的”

我尝试了几种方法，通过if函数，通过数组方法等。。。总是一样的问题

所以Html代码是这样的

<main id="mainBlock">
        <div class="divBlock">
                <input class="name" type="text">
                <input class="workingHours" type="text">
                <p class="money"></p>
                <button class="deleteButton">delete</button>
        </div>
        <button id="addButton">add</button>     
</main>

我想我应该首先解释一下onclick函数与create按钮的关系。为了让你更容易阅读，我删除了我创建所有新的p div和input元素的所有部分。因为每次单击add元素时，都会有一个新的索引号，我认为最好将它包含在addButton onclick功能中

---

提前感谢：）

由于您正在动态附加节点，然后希望删除它们，因此在“删除”按钮中添加/删除事件处理程序可能会非常烦人

更好的方法是使用事件委派，将事件侦听器添加到容器

#mainBlock

，并在调用时检查是否调用了删除按钮，如果是，则删除其父项

const项=`

删除
`;
const container=document.querySelector（“#mainBlock”）；
const addButton=document.querySelector（“#addButton”）；
addButton.addEventListener（'单击'，（）=>{
addButton.insertAdjacentHTML（'beforebegin'，item）；
});
container.addEventListener（'click'，e=>{
如果（！e.target.matches（'.deleteButton'））返回；
e、 target.parentNode.remove（）；
});

添加