如何使用javascript向列表项添加删除按钮？

例如，当您键入新项目时，您可以使用enter键或单击enter按钮进行添加，但我希望添加的新li项目旁边有一个按钮，上面写着delete，如果单击该按钮，我将能够删除此新li项目。我想我需要创建元素，然后我需要一个监听器，但我不知道如何正确地做到这一点

[这是我的密码笔]

//我的购物清单的变量 var input=document.getElementByIduserinput； var按钮=document.getelementbyident； var ul=document.querySelectorul； var list=document.getElementsByTagNameli； var trash=document.getElementsByClassNamedelete； var btndelete=document.getElementByIdtrash； //const myUL=document.getElementByIdbold； //用于使用“删除”按钮删除项目 Array.prototype.slice.calltrash.forEachfunctionitem{ item.AddEventListener单击，函数E{ e、 target.parentNode.remove }; } //循环以删除列表 forvar i=0；i0{ 阿德利； } } //这将使用按键添加一个新的列表项 函数addListKeyPress事件{ 如果inputlength>0&&event.which==13{ addli；} } //这将检查事件/按键并创建新的列表项 input.addEventListenerkeypress，addListKeyPress； //这将检查单击事件并创建新列表项 button.addEventListenerclick，addListAfterClick； 身体{ 背景图片：urleasy.jpg； } .coolTitle{ 文本对齐：居中； 字体系列：“Oswald”，Helvetica，无衬线； 字号：80px； 变换：歪斜-10度； 字母间距：4px； 字距：-8px； 颜色：番茄； 文本阴影： -1px-1px 0耐火砖， -2px-2px 0耐火砖， -3px-3px 0耐火砖， -4px-4px 0耐火砖， -5px-5px 0耐火砖， -6px-6PX0耐火砖， -7px-7px 0耐火砖， -8px-8px 0耐火砖， -30px 20px 40px浅灰色 } .完成{ 文字装饰：线条贯通； } 购物清单 购物清单 完成它 进来 鸡蛋删除 牛奶删除 蜡绿泥石 鸡删除 奥利奥删除

---

如果目标是delete按钮，则可以向ul添加一次事件侦听器并进行筛选。它比添加多个事件侦听器更有效

ul.addEventListenerclick，函数E{ var目标=e.target； 如果target.classList.containsdelete{ target.parentNode.remove； } }; //我的购物清单的变量 var input=document.getElementByIduserinput； var按钮=document.getelementbyident； var ul=document.querySelectorul； var list=document.getElementsByTagNameli； var trash=document.getElementsByClassNamedelete； var btndelete=document.getElementByIdtrash； //const myUL=document.getElementByIdbold； ul.addEventListenerclick，函数E{ var目标=e.target； 如果target.classList.containsdelete{ target.parentNode.remove； } }; //在类列表之间切换 函数删除{ this.classList.toggledone； } //检查输入的字符串的长度 函数输入长度{ 返回input.value.length； } //收集插入的数据 函数addli{ var li=document.createElementli； var btn=document.createElementbutton； li.appendChilddocument.createTextNodeinput.value； ul.appendChildli； input.value=； } //这将在单击后添加新的列表项 函数addListAfterClick{ 如果inputlength>0{ 阿德利； } } //这将使用按键添加一个新的列表项 函数addListKeyPressevent{ 如果inputlength>0&&event.which==13{ 阿德利； } } //这将检查事件/按键并创建新的列表项 input.addEventListenerkeypress、addListKeyPress； //这将检查单击事件并创建新列表项 button.addEventListenerclick，addListAfterClick； 身体{ 背景图片：urleasy.jpg； } .coolTitle{ 文本对齐：居中； 字体系列：“Oswald”，Helvetica，无衬线； 字号：80px； 变换：歪斜-10度； 字母间距：4px； 字距：-8px； 颜色：番茄； 文本阴影：-1px-1px 0耐火砖，-2px-2px 0耐火砖，-3px-3px 0耐火砖，-4px-4px 0耐火砖，-5px-5px 0耐火砖，-6px-6px 0耐火砖，-7px-7px 0耐火砖，-8px-8px 0耐火砖，-30px 20px 40px灰色 } .完成{ 文字装饰：线条贯通； } 李{ 边缘顶部：6px； } 购物清单 购物清单 完成它 进来 鸡蛋删除 牛奶删除 蜡绿泥石 鸡删除 奥利奥删除

---

创建按钮元素并向其添加事件侦听器：

//我的购物清单的变量 var input=document.getElementByIduserinput； var按钮=document.getelementbyident； var ul=document.querySelectorul； var list=document.getElementsByTagNameli； var trash=document.getElementsByClassNamedelete； var btndelete=document.getElementByIdtrash； //const myUL=document.getElementByIdbold； //用于使用“删除”按钮删除项目 Array.prototype.slice.calltrash.forEachfunctionitem{ item.AddEventListener单击，函数E{ e、 target.parentNode.remove }; } //循环以删除列表 对于var i=0；i0{ 阿德利； } } //这将使用按键添加一个新的列表项 函数addListKeyPressevent{ 如果inputlength>0&&event.which==13{ 阿德利； } } //这将检查事件/按键并创建新的列表项 input.addEventListenerkeypress、addListKeyPress； //这将检查单击事件并创建新列表项 button.addEventListenerclick，addListAfterClick； .coolTitle{ 文本对齐：居中； 字体系列：“Oswald”，Helvetica，无衬线； 字号：80px； 变换：歪斜-10度； 字母间距：4px； 字距：-8px； 颜色：番茄； 文本阴影：-1px-1px 0耐火砖，-2px-2px 0耐火砖，-3px-3px 0耐火砖，-4px-4px 0耐火砖，-5px-5px 0耐火砖，-6px-6px 0耐火砖，-7px-7px 0耐火砖，-8px-8px 0耐火砖，-30px 20px 40px灰色 } .完成{ 文字装饰：线条贯通； } 购物清单 完成它 进来 鸡蛋删除 牛奶删除 谷物删除 鸡删除 奥利奥删除

---

非常感谢你。今晚我要试试这个。哇，这完全奏效了。这正是我想做的。您是否建议在ul上使用click事件，因为代码会更干净？或者你提出这一建议还有其他原因吗？它在性能方面更干净、更高效。我可以问你为什么另一个答案被接受，因为它不能解决问题吗？你好，塔马斯，我对堆栈溢出非常陌生，而且仍然掌握着窍门。我想接受你的答案，而你提到的另一个答案并没有解决问题。我如何确保接受你的答案而不是另一个？谢谢，我在你的答案旁边做了检查。我将进行巡演以确保正确导航。我目前正在学习Javascript，非常感谢您的帮助：