Javascript 删除多个DOM'；s使用onclick目标

我不知道如何在一次点击中删除所有元素，它需要三次点击。我明白了为什么，我的li中有三个元素。我尝试了很多不同的方法，但都是通过三次单击来删除

function newItem(name, value, payed, id) {
    if(payed == true){
        return;
    }
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(name + ' ' + value));
    li.setAttribute("id", id);
    li.innerHTML = `<table><tr><td>${name}</td><td>${value}kr</td>`;
    ul.appendChild(li);
    bill = document.getElementById("billName").value = "";
    billVal = document.getElementById("billValue").value = ""; 
    li.onclick = removeItem;
}

function removeItem(event) {
    element = event.target;
    element.remove();
    data[element.id].payed = true;
    data[element.id].value = JSON.stringify(0);
    localStorage.setItem("Bills", JSON.stringify(data));
    location.reload();
  }

函数newItem（名称、值、付款人、id）{
如果（payed==true）{
返回；
}
var ul=document.getElementById（“列表”）；
var li=document.createElement（“li”）；
li.appendChild（document.createTextNode（name+''+value））；
li.setAttribute（“id”，id）；
li.innerHTML=`${name}${value}kr`；
ul.儿童（li）；
bill=document.getElementById（“billName”）.value=“”；
billVal=document.getElementById（“billValue”）.value=“”；
li.onclick=removietem；
}
函数removeItem（事件）{
元素=event.target；
元素。移除（）；
数据[element.id].payed=true；
data[element.id].value=JSON.stringify（0）；
setItem（“Bills”，JSON.stringify（data））；
location.reload（）；
}

您自己的代码似乎不起作用的原因是对

事件的误解；这是
事件
对象的属性，该对象标识第一次触发/检测事件的元素，事件可以从该元素冒泡到被指定为事件侦听器函数绑定到的
EventTarget
的祖先，使用
EventTarget.addEventListener（）

给出以下示例：


//这里我们使用一个生成器函数来生成
//用于元素的递增数字计数器-
//身份证；为“初始”变量指定默认值
//如果未提供一个：
设idGenerator=函数*（初始值=0）{
//在这里，我们使用一种可怕的方法来允许
//函数生成一个无限的
//数量（注意，这不会导致
//无限循环）
while（true）{
//我们得到初始变量的值，
//然后为下一个变量增加该值
//生成器的迭代：
收益率初始++；
}
},
//初始化发电机功能：
idGen=idGenerator（document.querySelectorAll（'#list li'）.length），
//我不喜欢键入“document.createElement（…）”
//重复地，所以helper函数t会为
//我：
创建=（el）=>{
返回文件.createElement（el）；
},
//存在的对的引用，以便
//向
元素添加新内容：
button=document.querySelector（'#add'），
//函数，该函数将创建并附加这些
//新元素；使用箭头语法：
createElement=（）=>{
//使用辅助函数创建元素：
const li=创建（'li'），
span=创建（'span'），
h2=创建（'h2'），
//从生成器获取新的id值：
id=idGen.next（）.value；
//使用
//Array.prototype.forEach（）以及箭头
//功能：
[li，span，h2]。forEach(
//“el”是对中当前元素的引用
//我们正在迭代的元素数组：
（el）=>{
//缓存对元素类型的引用：
让tag=el.tagName.toLowerCase（）；
//这里我们使用Element.dataset API添加自定义
//数据-*元素的属性和值，如下所示
//元素的标记名（用于可视化）
//（下文目的）：
el.dataset.tag=标签；
//这里我们设置元素的文本内容，所以
//每个元素都有一个唯一的文本，并且易于
//可识别：
el.textContent=`${tag}-元素：${id}`；
})
//将子元素附加到其父元素：
h2.追加（span）；
li.追加（h2）；
//将removeItem（）函数绑定为“单击”
//
元素的事件处理程序：
li.addEventListener（“单击”，删除项）；
//将
附加到
：
document.querySelector（“#list”）.append（li）；
};
//“事件”对象是从
//EventTarget.AddEventListener（）函数：
函数removeItem（事件）{
//我们得到了一个元素的引用，该元素基于
//相关活动已启动：
常量元素=event.target；
//这里我们更新该元素的颜色，以便显示
//检测到单击的位置，以便更容易地进行说明
//“事件目标”是什么：
element.style.color='#f90'；
//在这里，我们还为单击的元素指定了一个类名：
element.classList.add（'clicked'）；
//在这里，我们将一个自定义属性（'CSS变量'）再次添加到-中-
//立即明确事件发生的原因
//检测到：
element.style.setProperty（'--clickedElement'，`${element.tagName.toLowerCase（）}`）；
}
//将createElement（）函数绑定为事件处理程序
//对于“单击”事件：
按钮。addEventListener（'click'，createElement）；
//迭代现有的
元素并绑定
//将事件处理程序添加到它们：
document.querySelectorAll（“#list li”）.forEach(
（el）=>el.addEventListener（'click'，removeItem）
);
*，
：：之前，
：：之后{
框大小：边框框；
保证金：0；
填充：0；
列表样式类型：无；
}
正文*{
边框：1px实心#000；
边缘：0.5em；
}
正文[数据标记]：：之前{
内容：“（“属性（数据标记）”）；
颜色：#999；
}
氢{
对齐内容：居中对齐；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.点击：：之后{
内容：“您单击了：'var（--clickedElement，'span'）；
颜色：柠檬黄；
字号：1rem；
显示：块；
弹性基准：100%；
}

li元素：0
h2元素：0
跨度元素：0

li元素：1
h2元素：1
跨度元素：1


添加li元素
为什么要重新加载页面？Di