0

我正在制作一个待办事项列表来帮助我理解 Javascript。我设法创建了一系列<li>带有文本的元素。我想删除<li>元素，当它们被点击时。但是，目前他们没有反应。

JSFIDDLE：http: //jsfiddle.net/tmyie/aYLFL/

HTML：

<input id="input" placeholder="Write here">
<button>Add</button>
<hr>
<ul></ul>

Javascript：

var doc = document, // creates a variable, changing 'document' to the variable 'doc'
    list = doc.getElementsByTagName('ul')[0],
    li = doc.getElementsByTagName('li')[0],
    input = doc.getElementById('input'),
    button = doc.getElementsByTagName('button')[0]; // creates a variable called 'button', that gets the first array of all the <button> elements



button.onclick = function () {

    var mySubmission = doc.getElementById('input').value; // Get values of the input box and call it 'mySubmission'
    var item = doc.createElement('li'); // Creates a <li> element in a variable called 'item'
    item.innerHTML = mySubmission; // Inside the created 'item', the inner HTML becomes mySubmission + the class 'remove'

    list.appendChild(item); // get <ul>, and add the variable 'item'.
    doc.getElementById('input').value = ""; // resets input after submission

};

删除功能：

li.onclick = function () {

    li.parentNode.removeChild(li);

};

请原谅过多的评论，我试图更好地理解 Javascript。

4

1 回答 1

1

您定义li为：

li = doc.getElementsByTagName('li')[0]

但是没有li开始的元素，所以doc.getElementsByTagName('li')[0]返回undefined。

您需要将该事件处理程序移动到另一个回调中：

list.appendChild(item); // get <ul>, and add the variable 'item'.

item.onclick = function () {
    list.removeChild(item);
};
于 2013-06-29T01:27:59.523 回答