如何为使用javascript添加的每个列表项添加删除按钮？

我有一个刚开始的javascript项目，试图构建小项目。我想添加列表删除按钮，但ı不知道如何为每行添加删除按钮。 我已经创建了一个用于删除列表项的删除按钮，但它仅在最后添加的列表项中显示。如何使其显示在每个列表项中

“严格使用”；
const rootEl=document.getElementById（'root'）；
const form=document.createElement（'form'）；
form.setAttribute（'data-id'，'purchase form'）；
rootEl.appendChild（form）；
const message=document.createElement（'div'）；
message.setAttribute（'data-id'，'message'）；
表单。追加子项（消息）；
const inputName=document.createElement（'input'）；
setAttribute（'data-input'，'name'）；
form.appendChild（inputName）；
const inputPrice=document.createElement（'input'）；
setAttribute（'data-input'，'price'）；
inputPrice.setAttribute（'type'，'number'）；
表.追加子项（inputPrice）；
const buttonSubmit=document.createElement（'button'）；
ButtonsSubmit.setAttribute（'data-action'，'add'）；
ButtonsSubmit.textContent='Сбббббб'；
表单。追加子项（按钮提交）；
const listPurchases=document.createElement（'ul'）；
setAttribute（'data-id'，'purchases list'）；
rootEl.appendChild（列表购买）；
const div=document.createElement（'div'）；
div.textContent='；
附肢儿童（分部）；
const span=document.createElement（'span'）；
span.setAttribute（'data-id'，'most-private'）；
span.textContent='БСПццццц'；
子类（span）；
constdeletebutton=document.createElement（'button'）；
setAttribute（'data-action'，'remove'）；
setAttribute（'type'，'button'）；
deleteButton.textContent='Уааааа'；
设nextId=1；
常数购买=[]；
回笼现金=0.005；
const purchaseForm=rootEl.querySelector（“[data id=“purchaseForm”]”）；
const nameInput=purchaseForm.querySelector（'[data input=“name”]'）；
const priceInput=purchaseForm.querySelector（“[data input=“price”]”）；
const button=purchaseForm.querySelector（'[data action=“add”]'）；
const purchasesList=document.querySelector（“[data id=“采购清单”]”）；
const mostExpensive=rootEl.querySelector（'[data id=“most-priced”]'）；
const messageEl=rootEl.querySelector（'[data id=“message”]'）；
const Buttondelete=rootEl.querySelector（'[data action=“remove”]'）；
nameInput.focus（）；
purchaseForm.onsubmit=（evt）=>{
evt.preventDefault（）；
const name=nameInput.value.trim（）；
常量价格=数字（priceInput.value）；
//现金返还=价格>1？0.005:0；
如果（名称！=''&&price！==null&&price>0）{
messageEl.textContent=''；
取消移位({
id:nextId++，
姓名:姓名,，
价格：价格，
});
nameInput.focus（）；
createElement（名称）；
newPurchase.appendChild（删除按钮）；
purchaseForm.reset（）；
mostExpensive.textContent=`${name}ааааааа${
计算昂贵的价格
} с.`;
}
如果（名称==''）{
messageEl.textContent=“'；
nameInput.focus（）；
}否则，如果（！价格）{
messageEl.textContent=“'；
priceInput.focus（）；
}否则，如果（价格<0）{
messageEl.textContent=“'；
priceInput.focus（）；
}
//如果（[price==''''），则为else{
//messageEl.textContent=“'；
//priceInput.focus（）；
// }
如果（价格>0&&name！=''）{
messageEl.textContent=''；
}
};
让新的购买；
函数createElement（ci）{
newPurchase=document.createElement（'li'）；
newPurchase.setAttribute（'data-purchase-id'，nextId-1）；
newPurchase.textContent=`${ci}аСааМа${priceInput.value}С`；
PurchaseList.prepend（新采购）；
purchasesList.insertBefore（newPurchase，newPurchase）；
deleteButton.onclick=（evt）=>{
evt.preventDefault（）；
调试器；
newPurchase.parentNode.removeChild（newPurchase）；
};
}
让马克斯；
函数calculatemosexpensive（）{
调试器；
退货（最大=购买量。减少(
（上一个，当前）=>（上一个价格>当前价格？上一个：当前），
1.
));
}

бббббббббббз。

我对您的代码进行了以下更新：

将删除按钮代码移到onsubmit中

传递delete按钮引用，如

createElement（名称，deleteButton）

使用事件的目标属性删除按钮，如：

evt.target.parentNode.remove（）

演示：

“严格使用”；
const rootEl=document.getElementById（'root'）；
const form=document.createElement（'form'）；
form.setAttribute（'data-id'，'purchase form'）；
rootEl.appendChild（form）；
const message=document.createElement（'div'）；
message.setAttribute（'data-id'，'message'）；
表单。追加子项（消息）；
const inputName=document.createElement（'input'）；
setAttribute（'data-input'，'name'）；
form.appendChild（inputName）；
const inputPrice=document.createElement（'input'）；
setAttribute（'data-input'，'price'）；
inputPrice.setAttribute（'type'，'number'）；
表.追加子项（inputPrice）；
const buttonSubmit=document.createElement（'button'）；
ButtonsSubmit.setAttribute（'data-action'，'add'）；
ButtonsSubmit.textContent='Сбббббб'；
表单。追加子项（按钮提交）；
const listPurchases=document.createElement（'ul'）；
setAttribute（'data-id'，'purchases list'）；
rootEl.appendChild（列表购买）；
const div=document.createElement（'div'）；
div.textContent='；
附肢儿童（分部）；
const span=document.createElement（'spa