如何使用javascript删除项目和清除表单
How to delete items and clear a form using javascript
我很抱歉发布这个问题,我只是在学习JavaScript,并尝试使用其他帖子中的信息,但无法使我的代码正常工作。对象是创建一个li标记,并将列表项插入到这个新创建的标记中,然后在用户单击某个项时分配一个事件处理程序来删除该项。我已经填充了列表,如果我对项目进行硬编码,我可以删除它,但我一生都无法弄清楚如何将单击的项目的值分配给removeItem函数。当输入项目时,我也试图清除列表,但不断收到错误"Object不支持属性或方法'reset'"。如果有人能为我指明正确的方向,我将不胜感激。谢谢
<!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>
为什么不将项输入的值设置为空字符串,而不是使用重置?
document.getElementById("item").value = "";
至于删除列表项。。。
for (var i = 0; i < ul.children.length; i++) {
ul.children[i].addEventListener("click", removeItem);
}
-
您只能重置表单,因此您必须选择表单,然后重置即可。f.e.与:
document.forms[0].reset()
-
您的代码正在将事件处理程序添加到所有现有的li元素中,如果稍后创建一些新的li元素,则必须手动将事件处理器添加到其中。f.e.在您的addItem函数中使用:
li.onclick=removeItem;
推送新项目之后
-
在你的removeItem函数中,你可以通过这个访问点击的元素,所以你只能用删除这个元素
this.remove()
您可以更改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();
}
相关文章:
- 如何在使用AngularJS更改下拉值时清除表单中的数据
- 在Chrome中重新加载页面后清除表单输入值
- Angularjs:提交后清除表单无效
- 我无法使用 .reset() 清除表单
- 我无法从引导模式中清除表单数据
- 如何在我的create.js.erb中重置/清除表单
- 如何使用javascript删除项目和清除表单
- 当没有表单名称时,如何在AngularJS中清除表单
- 如何不清除表单jQuery中禁用的输入
- 使用 jQuery 重置/清除表单
- 提交 angularjs 后清除表单
- 在 cakephp 1.3 中提交后清除表单
- MVC 3 剃刀无法使用验证类清除表单值
- JavaScript -- 提交值后清除表单
- 如何编辑我的 js,以便在输出输出之前清除表单
- 提交后清除表单中的文本字段
- Chrome扩展-点击清除表单文本
- 提交时未清除表单
- 如何在验证后清除表单
- 单击运行清除表单的JS函数的按钮后,视图无法恢复