Question

我第一次在这里问一个问题，如果我缺少信息，请道歉。我有以下vanillaJS并收到无法读取属性'removeChild'的null错误。当我单击任何列表项的“删除”图标时，控制台中会出现错误，除了列表中的最后一个。但是，单击的项目仍然应该被删除。我应该关注这个错误吗？如果是这样，我该如何解决？

我也只是在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（e），这意味着每次运行该循环时都要添加新的事件侦听器。当您单击“删除”按钮时，它会在第一次删除该元素时再次尝试时返回错误并且它不存在。（查看你的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

即使我的无序列表工作正常，我收到'未捕获的TypeError：无法读取属性'removeChild'of null'错误

1 个答案: