Javascript 创建一个列表（<；li>；），然后删除元素

我必须根据用户的输入创建一个列表，然后选择删除元素。如果是这样，我尝试了这个

我的想法是创建列表，在底部有一个“删除按钮”，一旦点击它，它应该为列表中的每个元素添加一个“删除”选项，但是相反，我最终用这个删除按钮替换列表中的所有元素，有什么提示吗

函数addmember（）{
var z=getInputValue（）；
var ul=document.getElementById（“crew1”）；
var li=document.createElement（“li”）；
li.appendChild（document.createTextNode（z））；
ul.儿童（li）；
}
函数删除（）{
var r=document.getElementById（“crew1”）；
var z=r.getElementsByTagName（“li”）；
对于（i=0；i移动一个成员）
}
}
函数getInputValue（）{
//选择输入元素并获取其值
var inputVal=document.getElementById（“myInput”）.value；
//显示值
返回输入值；
}

测试
添加成员
工作人员：



去除

您正在覆盖此处的整个元素

z[i]。innerHTML=“每次添加成员时，我都会添加一个按钮，然后在该按钮上添加一个事件侦听器，以便仅删除该工作组成员



测试
添加成员
工作人员：



函数addmember（）{
var z=getInputValue（）；
var ul=document.getElementById（“crew1”）；
var li=document.createElement（“li”）；
var rem=document.createElement（“按钮”）；
rem.innerHTML=“删除”；
rem.setAttribute（“类型”、“按钮”）；
li.innerHTML=z；
附肢儿童（rem）；
ul.儿童（li）；
rem.addEventListener（“单击”，函数（）{
ul.removeChild（李）；
})
}
函数getInputValue（）{
//选择输入元素并获取其值
var inputVal=document.getElementById（“myInput”）.value；
//显示值
返回输入值；
}
我已经稍微更新了您的代码，您可以将侦听器附加到父级并调用remove，检查事件目标是否为button并删除其父级“li”，而不是将侦听器添加到每个按钮



测试
添加成员
工作人员：



函数addmember（）{
var z=getInputValue（）；
var ul=document.getElementById（“crew1”）；
var li=document.createElement（“li”）；
li.appendChild（document.createTextNode（z））；
var button=document.createElement（'button'）；
button.innerHTML='remove'；
li.appendChild（按钮）；
ul.儿童（li）；
}
函数删除（事件）{
如果（event.target.type==“提交”）{
event.target.parentElement.remove（）；
}
}
函数getInputValue（）{
//选择输入元素并获取其值
var inputVal=document.getElementById（“myInput”）.value；
//显示值
返回输入值；
}
这是因为您正在用按钮替换li的innerHTML，而您应该像这样附加它：



测试
添加成员
工作人员：



去除
函数addmember（）{
var z=getInputValue（）；
var ul=document.getElementById（“crew1”）；
var li=document.createElement（“li”）；
li.appendChild（document.createTextNode（z））；
ul.儿童（li）；
}
函数删除（）{
var r=document.getElementById（“crew1”）；
var z=r.getElementsByTagName（“li”）；
对于（i=0；i您是手动添加到列表中还是有表单

这里有一些帮助


函数addItem（）{
var ul=document.getElementById（“动态列表”）；
var candidate=document.getElementById（“candidate”）；
var li=document.createElement（“li”）；
li.setAttribute（'id'，candidate.value）；
li.appendChild（document.createTextNode（candidate.value））；
ul.儿童（li）；
}
函数removietem（）{
var ul=document.getElementById（“动态列表”）；
var candidate=document.getElementById（“candidate”）；
var item=document.getElementById（candidate.value）；
ul.移除儿童（项目）；
}

从列表中动态添加/删除项-JavaScript

添加项
删除项目
你能给我解释一下函数：函数删除（event）{if（event.target.type=='submit'）{event.target.parentElement.remove（）；}我不明白发生了什么，实际上我们正在向父级添加一个侦听器，所以现在如果您单击
文本，它也会触发此函数，但我们只想在按下按钮时删除。因此，在这一行（event.target.type='submit'）我们正在检查一个按钮是否按下，然后只需删除它的父按钮，即
。谢谢！这很有帮助！
    var button = document.createElement("button");
    button.innerHTML = "Remove list element";
    button.onclick = function(e) {
      // Remove the list element here 
    }
    z[i].appendChild(button);