如何使用JavaScript删除项目并清除表格
[英]How to delete items and clear a form using javascript
问题描述
I apologize for posting this question, I'm just learning JavaScript and have tried using the information from other posts but just cannot get my code to work. 
我为发布这个问题道歉，我只是在学习JavaScript并尝试使用其他帖子中的信息，但却无法让我的代码工作。 The object is to create an li tag and insert list items to this newly created tag, then assign an event handler to remove an item if the user clicks on it. 对象是创建一个li标签并将列表项插入到这个新创建的标签中，然后分配一个事件处理程序，以便在用户单击它时删除该项。 I have the list populating and can remove an item if I hardcode it but cannot for the life of me figure out how to assign the value of the item being clicked on to the removeItem function. 我有列表填充，如果我硬编码它可以删除一个项目，但不能在我的生活中弄清楚如何将被点击的项目的值分配给removeItem函数。 I am also trying to clear the list when an item is entered but keep getting the error "Object doesn't support property or method 'reset'". 我还试图在输入项目时清除列表，但不断收到错误“对象不支持属性或方法'重置'”。 If someone could point me in the right direction I would appreciate it. 如果有人能指出正确的方向，我将不胜感激。 thanks! 谢谢！
<!doctype html>
<html lang="en">
<head>
<title> Add and delete items Objective </title>
<meta charset="utf-8">
<style>
p {
font-style: italic;
}
li:hover {
cursor: pointer;
}
</style>
<script>
// your code here!
var itemList = [];
window.onload = init;
function init() {
var addButton = document.getElementById("submitButton");
addButton.onclick = addItem;
//var itemList = document.getElementById("list");
var itemsList = document.getElementsByTagName("li");
itemsList.onclick = removeItem;
}
function addItem() {
var newItem = document.getElementById("item").value;
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode(newItem));
ul.appendChild(li);
itemList.push(newItem);
document.getElementById("item").reset();
}
function removeItem() {
var editList = document.getElementsByTagName("li");
// var editList = document.getElementsById("list");
for (var i = 0; i < editList.length; i++) {
var item = editList[i];
if(editList.options[i].selected) {
editList.removeChild(editList.childNodes[i]);
}
}
}
</script>
</head>
<body>
<form>
<label form="item">Add an item: </label>
<input id="item" type="text" size="20"><br>
<input id="submitButton" type="button" value="Add!">
</form>
<ul id="list">
</ul>
<p>
Click an item to remove it from the list.
</p>
</body>
</html>
3 个解决方案
解决方案1
0 已采纳 2015-02-11 16:36:32
Why not set the value of the item input to an empty string rather than using reset? 为什么不将输入的项的值设置为空字符串而不是使用reset？
document.getElementById("item").value = "";
As for removing the list items... 至于删除列表项...
for (var i = 0; i < ul.children.length; i++) {
ul.children[i].addEventListener("click", removeItem);
}
解决方案2
0 2015-02-11 19:36:45
you can only reset forms, so you have to select the form and then reset will work.
你只能重置表格，所以你必须选择表格，然后重置将起作用。 fe with: fe： document.forms[0].reset()
document.forms [0] .reset段（） your code is adding the eventhandler to all existing li-Elements, if you create some new li-Elements later, you have to add the eventhandler to it manually.
您的代码是将eventhandler添加到所有现有的li-Elements，如果稍后创建一些新的li-Elements，则必须手动将eventhandler添加到它。 fe in your addItem-Function with: fe在您的addItem-Function中具有： li.onclick = removeItem;
li.onclick = removeItem;
after pushing the new Item 推动新物品后
in your removeItem-Function you have access on the clicked Element via this, so you can remove only this Element with:
在removeItem-Function中，您可以通过此元素访问被单击的元素，因此您可以使用以下方法仅删除该元素： this.remove()
this.remove（）
解决方案3
0 2015-02-12 20:37:07
You could change your addItem() and removeItem() functions : 您可以更改addItem（）和removeItem（）函数：
function addItem() {
var newItem = document.getElementById("item").value;
$('#list').append("<li id='" + newItem + "' onclick='removeItem(this)'>" + newItem + "</li>");
}
function removeItem(id) {
$(id).remove();
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.