Javascript 我收到'；未捕获类型错误：无法读取属性'；removeChild'；空值'；错误，即使我的无序列表工作正常

我第一次在这里问问题，所以如果我遗漏了信息，我道歉。我有以下vanillaJS，并收到null错误的无法读取属性'removeChild'。当我单击除列表中最后一项之外的任何列表项的“删除”图标时，控制台中会发生错误。但是，单击的项目仍会按原样删除。我应该担心这个错误吗？如果是，我该如何修复它

我也只是在Chrome上测试过，我知道addEventListener在旧版IE上不起作用，但我只是想先让它在一个浏览器上工作。谢谢

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

//我的删除按钮的变量
var getRid=document.getElementsByClassName（'remove-icon'）；
//“我的添加项目”按钮的变量
var addListItem=document.getElementById（'add-more'）；
/*添加项目事件侦听器，并创建具有所需css类属性、输入字段和移除图标的新li*/
addListItem.addEventListener（'单击'，函数（））{
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（'占位符'，'在此处输入项'）；
l、 setAttribute（'class'，'list item'）；
setAttribute（'class'，'remove icon'）；
icon.setAttribute（'src'，'delete.png'）；
l、 附肢儿童（eliput）；
l、 附加子对象（图标）；
u、 儿童（l）；
//调用以更新删除图标的数量
updateItems（）；
});
//将事件侦听器添加到列表中创建的新项目的“删除图标”
函数updateItems（）{
for（var i=0；i

问题的根源在于每次添加列表项时都会调用该图标（e），这意味着每次运行该循环时都会添加新的事件侦听器。当您单击“删除”按钮时，它会第一次删除该元素，然后在重试时返回一个错误，该错误不存在。（查看for循环-如果添加多个事件侦听器，它们将堆叠）

更好的方法是在创建DOM元素时创建事件侦听器。尽量不要在HTML中创建元素，也不要在Javascript中添加元素。我添加了一个代码笔作为示例：

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

---

updateItems（）

向已经有单击处理程序的元素添加额外的单击处理程序…这意味着

elFullList

是空值，我明白了。它工作得完美无缺，看起来也干净多了。谢谢