removeChild не будет удалять Javascript сгенерированный контент

Question

Я делаю список дел, чтобы помочь мне понять 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.

Answer 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); 
};