Как удалить кнопку Удалить элемент LI в коде ниже?

Question

В настоящее время я изучаю Javascript, чтобы понять его лучше. Когда вы добавляете элемент в список, я бы хотел удалить кнопку удаления, чтобы удалить его.

Мне кажется, когда я делаю deleteButton.parentNode.parentNode.removeChild(), он должен удалить элемент li, но не знаю, почему это не работает.

JSFiddle здесь: http://jsfiddle.net/kboucheron/XVq3n/18/

addButton = document.getElementById('addButton'); 
clearButton = document.getElementById('clearButton'); 
deleteButton = document.getElementById('deleteButton'); 

addButton.addEventListener("click", function(e) { 
    var text = document.getElementById('listItem').value; 
    var addItem = document.getElementById('output'); 
    var entry = document.createElement("li"); 
    text += ' <button id="deleteButton">Delete</button>'; 
    entry.innerHTML = text;  
    addItem.appendChild(entry); 
}); 

clearButton.addEventListener("click", function(e) { 
    var text = document.getElementById('listItem'); 
    var addItem = document.getElementById('output'); 
    addItem.innerHTML = ''; 
    text.value = ''; 
}); 

deleteButton.addEventListener("click", function(e) { 
    deleteButton.parentNode.parentNode.removeChild(); 
}); 

Answer 1

Если вы видите вашу консоль браузера есть ошибка говоря Uncaught TypeError: Cannot call method 'addEventListener' of null это происходит потому, что нет ни одного элемента с идентификатором deleteButton при загрузке страницы.

Также обратите внимание, что идентификатор элемента должен быть уникальным в документе, поэтому, поскольку вы добавляете несколько кнопок удаления, используйте атрибут класса для их группировки.

Ваш код должен быть

//wait for the window onload event 
window.onload = function() { 
    var addButton = document.getElementById('addButton'); 
    var clearButton = document.getElementById('clearButton'); 

    addButton.addEventListener("click", function (e) { 
     var text = document.getElementById('listItem').value; 
     var addItem = document.getElementById('output'); 
     var entry = document.createElement("li"); 
     entry.innerHTML = text; 

     //create a button element 
     var btn = document.createElement("Button"); 
     btn.innerHTML = 'Delete'; 
     //add button to li 
     entry.appendChild(btn); 
     //add a click handler to the button 
     btn.addEventListener("click", function (e) { 
      //delete the parent li 
      this.parentNode.parentNode.removeChild(this.parentNode); 
     }); 

     addItem.appendChild(entry); 
    }); 

    clearButton.addEventListener("click", function (e) { 
     var text = document.getElementById('listItem'); 
     var addItem = document.getElementById('output'); 
     addItem.innerHTML = ''; 
     text.value = ''; 
    }); 
}) 

Демо: Fiddle

Answer 2

Поскольку вы помечать jQuery, вы можете использовать технику вызова event delegation:

$(document).on('click','.deleteButton', function() { 
    $(this).parent().remove();  
}); 

В этом случае, это будет поможет вам для привязки события клика к динамически созданной кнопке удаления.

Btw, потому что id является уникальным, так что вы должны использовать класс вместо идентификатора для кнопки

Updated Fiddle