Как удалить элементы и очистить форму с помощью javascript

Прошу прощения за сообщение об этом вопросе, я просто изучаю JavaScript и пытаюсь использовать информацию из других сообщений, но просто не могу заставить мой код работать. Целью является создание тега li и вставка элементов списка в этот вновь созданный тег, а затем назначить обработчик события для удаления элемента, если пользователь нажмет на него. У меня есть список, заполняющий и могу удалить элемент, если я его hardcode, но не могу на всю жизнь выяснить, как назначить значение элемента, на который нажата функция removeItem. Я также пытаюсь очистить список, когда элемент введен, но продолжайте получать ошибку «Объект не поддерживает свойство или метод« reset ». Если кто-то может указать мне в правильном направлении, я был бы признателен. спасибо!Как удалить элементы и очистить форму с помощью 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

У меня это работает! Спасибо вам за помощь - – TRogers

Почему бы не установить значение элемента ввода в пустую строку, а не использовать сброс?

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()
ваш код добавления EventHandler ко всем существующим Li-элементов, если вы создаете какой-то новый Li-элементы позже, вы должны добавить EventHandler к нему вручную. F.E. в вашей функции addItem с:

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

ответ

Смежные вопросы