Javascript 删除最后一个元素后未定义父节点

我正在尝试创建一个待办事项列表，您可以在其中动态附加一个移除按钮，该按钮与父div中的每个新附加元素一起显示。单击移除按钮仅支持移除相应的新元素

这适用于列表上的最后一项，但当我尝试删除其他项时，控制台会说它的父节点为null

关于这里发生的事情有什么建议吗

var input=document.getElementById（“boxInput”）；
var output=document.getElementById（“输出”）
var submit=document.getElementById（“提交”）
var i=0；
函数addElement（parentId、elementTag、elementId、html）{
var输出=document.getElementById（parentId）；
var newElement=document.createElement（elementTag）；
setAttribute（'id'，elementId）；
newElement.innerHTML=html；
output.appendChild（新元素）
}
函数removeElement（elementId）{
var element=document.getElementById（elementId）；
element.parentNode.removeChild（元素）；
}
var itemId=0；
函数additem（）{
i+=1
itemId++；
const btn=document.createElement（“按钮”）；
btn.onclick=function（）{}
var html=i++“+input.value++`X”；
addElement（“输出”、“p”（“项-”+itemId），html）；
返回项目ID
}
submit.addEventListener（“单击”，添加项）；

#框{
保证金：自动；
边框宽度：3倍；
边界半径：5px；
边框颜色：黑色；
边框样式：实心；
宽度：300px；
高度：100px；
利润上限：200px；
线高：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#输入框{
宽度：150px；
文本对齐：居中；
右边距：5px；
}
#输出{
边缘顶部：20px；
宽度：100%；
文本对齐：居中；
}
h1{
边缘：中心；
文本对齐：居中；
位置：相对位置；
顶部：190px；
}
.删除{
左边距：5px；
}

待办事项列表！
提交
不需要
itemId
或类似的东西。只需为每个todo项目创建一个
div
。向其中添加一个
和
。将事件侦听器添加到按钮，在该按钮中，您可以从
输出
元素中删除整个todo div
var input=document.getElementById（“boxInput”）；
var output=document.getElementById（“输出”）
var submit=document.getElementById（“提交”）
函数additem（）{
const todo=document.createElement（'div'）；
const btn=document.createElement（'button'）；
btn.innerHTML=“删除”
const text=document.createElement（'span'）；
text.innerHTML=input.value；
todo.appendChild（文本）；
todo.附加子项（btn）；
btn.addEventListener（'单击'，（e）=>{
output.removeChild（todo）
})
output.appendChild（todo）
}
submit.addEventListener（“单击”，添加项）；
#框{
保证金：自动；
边框宽度：3倍；
边界半径：5px；
边框颜色：黑色；
边框样式：实心；
宽度：300px；
高度：100px；
利润上限：200px；
线高：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#输入框{
宽度：150px；
文本对齐：居中；
右边距：5px；
}
#输出{
边缘顶部：20px；
宽度：100%；
文本对齐：居中；
}
h1{
边缘：中心；
文本对齐：居中；
位置：相对位置；
顶部：190px；
}
.删除{
左边距：5px；
}
待办事项列表！
提交
不需要
itemId
或类似的东西。只需为每个todo项目创建一个
div
。向其中添加一个
和
。将事件侦听器添加到按钮，在该按钮中，您可以从
输出
元素中删除整个todo div
var input=document.getElementById（“boxInput”）；
var output=document.getElementById（“输出”）
var submit=document.getElementById（“提交”）
函数additem（）{
const todo=document.createElement（'div'）；
const btn=document.createElement（'button'）；
btn.innerHTML=“删除”
const text=document.createElement（'span'）；
text.innerHTML=input.value；
todo.appendChild（文本）；
todo.附加子项（btn）；
btn.addEventListener（'单击'，（e）=>{
output.removeChild（todo）
})
output.appendChild（todo）
}
submit.addEventListener（“单击”，添加项）；
#框{
保证金：自动；
边框宽度：3倍；
边界半径：5px；
边框颜色：黑色；
边框样式：实心；
宽度：300px；
高度：100px；
利润上限：200px；
线高：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#输入框{
宽度：150px；
文本对齐：居中；
右边距：5px；
}
#输出{
边缘顶部：20px；
宽度：100%；
文本对齐：居中；
}
h1{
边缘：中心；
文本对齐：居中；
位置：相对位置；
顶部：190px；
}
.删除{
左边距：5px；
}
待办事项列表！
提交