如何通过单击从 JavaScript 的列表中删除项目？
[英]How can i delete items from a list in JavaScript by clicking?
问题描述
我正在尝试制作购物清单，我希望添加和删除单个项目。 如何才能做到这一点？
function getValue() { var val = document.getElementById("itemList").value; var list = document.getElementById("demo"); var element = document.createElement("li"); var addList = document.createTextNode(val); element.appendChild(addList); list.prepend(element); }
<html> <head> <title> Common List </title> </head> <body> <form> <input type="text" id="itemList"> <button type="button" onclick="getValue()">add to list</button> <ul id="demo"></ul> </form> </body> </html>
1 个解决方案
解决方案1
0 2021-04-20 20:19:22
添加时向元素添加事件侦听器。 这可以使用remove()方法将其从列表中删除。
function getValue() { var val = document.getElementById("itemList").value; var list = document.getElementById("demo"); var element = document.createElement("li"); var addList = document.createTextNode(val); element.appendChild(addList); element.addEventListener("click", function() { if (confirm(`Do you really want to remove ${this.innerText}`)) { this.remove(); } }); list.prepend(element); }
<html> <head> <title> Common List </title> </head> <body> <form> <input type="text" id="itemList"> <button type="button" onclick="getValue()">add to list</button> <ul id="demo"></ul> </form> </body> </html>
如何在不重新渲染未删除的项目的情况下从列表中删除项目？
[英]How can I delete an item from list without re-rendering undeleted Items?
如何从javascript获取存储在html 5本地存储中的项目列表？
[英]How can I get a list of the items stored in html 5 local storage from javascript?
如何清除 Javascript 中的列表，即一键删除列表中的所有项目？
[英]How do you clear a list in Javascript, i.e. delete all items in a list with one button click?
此功能突出显示选定的文本，如何删除javascript单击突出显示的文本所产生的跨度？
[英]this function highlight selected text, how can i delete the span made by javascript clicking the highlighted text?
如何通过单击放置在其中的按钮来删除整个列表项？
[英]How can I delete an entire list item by clicking a button placed within it?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用 javascript 将删除按钮添加到列表项？
如何通过状态单击从 FlatList 中一一删除项目
我想使用 javascript 从 UL 列表中删除列表项
单击图标后如何显示我的列表项？
如何使用“清除”按钮删除列表项？ (javascript)
如何在不重新渲染未删除的项目的情况下从列表中删除项目？
如何从javascript获取存储在html 5本地存储中的项目列表？
如何清除 Javascript 中的列表，即一键删除列表中的所有项目？
此功能突出显示选定的文本，如何删除javascript单击突出显示的文本所产生的跨度？
如何通过单击放置在其中的按钮来删除整个列表项？
相关标签