如何刪除項目並使用javascript清除表單

我很抱歉發佈此問題，我剛剛學習JavaScript並試圖使用其他帖子中的信息，但無法讓我的代碼正常工作。目標是創建一個li標籤並將列表項插入到這個新創建的標籤中，然後分配一個事件處理程序來刪除一個項目，如果用戶點擊它。我有列表填充，並可以刪除一個項目，如果我硬編碼，但不能爲我的生活弄清楚如何分配被點擊的項目的值到removeItem函數。我也試圖在輸入項目時清除列表，但不斷收到錯誤「對象不支持屬性或方法'重置'」。如果有人能指出我在正確的方向，我將不勝感激。謝謝！如何刪除項目並使用javascript清除表單

<!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>

來源

2015-02-11 TRogers

非常感謝您的信息，我會再試一次！ – TRogers 2015-02-11 16:56:02

我得到它的工作！感謝您的幫助 - – TRogers 2015-02-15 17:47:30

爲什麼不將輸入項的值設置爲空字符串而不是使用重置？

document.getElementById("item").value = "";

至於刪除列表項...

for (var i = 0; i < ul.children.length; i++) { 
    ul.children[i].addEventListener("click", removeItem); 
}

來源

2015-02-11 16:36:32

你只能重新形式，所以你要選擇表單，然後重新將工作。 F.E.搭配：

document.forms [0] .reset段（）
你的代碼添加事件處理所有現有的鋰元素，如果你創建了一些新的鋰元素後，你必須添加事件處理程序手動。 F.E.在你的addItem-Function中加入：

li.onclick = removeItem;

推新項目

在你的removeItem - 功能之後，你必須通過這對點擊的元素訪問，這樣你就可以刪除僅此元素：

this.remove （）

來源

2015-02-11 19:36:45 kufufra

你可以改變你的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(); 
}

來源

2015-02-12 20:37:07 Endacy

如何刪除項目並使用javascript清除表單

回答

相關問題