Я получаю сообщение об ошибке «Uncaught TypeError: Can not read property» removeChild «null», несмотря на то, что мой неупорядоченный список отлично работает

Question

Мое первое задание, задающее здесь вопрос, так извиняюсь, если мне не хватает информации. У меня есть следующий vanillaJS и получить свойство Can not read 'removeChild' нулевой ошибки. Ошибка возникает в консоли, когда я нажимаю значок «удалить» любого элемента списка. ИСКЛЮЧАЕТ последний из списка. Однако элемент, который был нажат, по-прежнему удаляется, как и должно быть. Должен ли я беспокоиться об этой ошибке? Если да, то как мне это исправить?

Я тестировал это только на Chrome, я знаю, что addEventListener не работает с более старым IE, но я просто пытаюсь заставить это работать в одном браузере в первую очередь. Благодаря!

https://jsfiddle.net/L5vwdob5/

JavaScript:

// Variable for my delete buttons 
    var getRid = document.getElementsByClassName('remove-icon'); 

    // Variable for my add item button 
    var addListItem = document.getElementById('add-more'); 

    /* Add item event listener and creation of new li with required css class properties, input field, and remove icon*/ 
    addListItem.addEventListener('click', function(){ 
     var u = document.getElementById('full-item-list'); 
     var l = document.createElement('li'); 
     var elinput = document.createElement('input'); 
     var icon = document.createElement('img'); 
     elinput.setAttribute('type', 'text'); 
     elinput.setAttribute('class', 'li-input'); 
     elinput.setAttribute('placeholder', 'Enter item here'); 
     l.setAttribute('class', 'list-item'); 
     icon.setAttribute('class', 'remove-icon'); 
     icon.setAttribute('src', 'delete.png'); 
     l.appendChild(elinput); 
     l.appendChild(icon); 
     u.appendChild(l); 
    //Called to update number of remove icons 
     updateItems(); 
    }); 

    // Add event listener to 'remove-icon' to new items created in list 
    function updateItems() { 
     for (var i = 0; i < getRid.length; i++){ 
     getRid[i].addEventListener('click', function(e) { 
      thaticon(e); 
     }, false); 
     } 
    } 

    // Call function so first item in list can be deleted on page load 
    updateItems(); 



    // Function to remove items 
    function thaticon(e) { 
     var el = e.target; 
     var elListItem= el.parentNode; 
     elFullList = elListItem.parentNode; 
     elFullList.removeChild(elListItem); 
    } 

Answer 1

корень проблемы заключается в том, что вы звоните thaticon (е) каждый раз, когда вы добавляете элемент списка, который означает, что вы добавляете новое событие слушатель каждый раз, когда он запускает этот цикл. Когда вы нажимаете кнопку «Удалить», она сначала удаляет элемент, а затем возвращает ошибку, когда она пытается снова, и она не существует. (Посмотрите на свой цикл for - если вы добавите несколько прослушивателей событий, они будут стекаться).

Лучшей идеей было бы создать прослушиватель событий при создании элемента DOM для начала. Старайтесь избегать создания элемента в HTML, а также добавляете его в Javascript. Я добавил codepen в качестве примера:

icon.addEventListener('click', function(e) { 
    thaticon(e); 
    }, false); l.appendChild(elinput); 
    l.appendChild(icon); 

http://codepen.io/JoeCoulam/pen/dXEJzz