最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - I receive a 'Uncaught TypeError: Cannot read property 'removeChild' of null' error

programmeradmin3浏览0评论

My first time asking a question on here so apologies if I'm missing information. I have the following vanillaJS and receive the Cannot read property 'removeChild' of null error. The error occurs in the console when I click the 'remove' icon of any list item EXCEPT the last one in the list. However the item clicked is still removed as it should be. Should I be concerned about this error? If so how do I fix it?

I've only been testing this on Chrome as well, I know addEventListener doesn't work on older IE but I'm just trying to get this working on one browser first. Thanks!

/

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

My first time asking a question on here so apologies if I'm missing information. I have the following vanillaJS and receive the Cannot read property 'removeChild' of null error. The error occurs in the console when I click the 'remove' icon of any list item EXCEPT the last one in the list. However the item clicked is still removed as it should be. Should I be concerned about this error? If so how do I fix it?

I've only been testing this on Chrome as well, I know addEventListener doesn't work on older IE but I'm just trying to get this working on one browser first. Thanks!

https://jsfiddle/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);
    }
Share Improve this question asked Aug 23, 2016 at 2:43 Zay01Zay01 331 gold badge1 silver badge4 bronze badges 2
  • updateItems() adds additional click handlers to elements that already have click handlers... – nnnnnn Commented Aug 23, 2016 at 2:48
  • So that means elFullList is null – epascarello Commented Aug 23, 2016 at 2:56
Add a ment  | 

1 Answer 1

Reset to default 4

the root of the problem is that you're calling thaticon(e) every time you add a list item, which means you're adding a new event listener every time it runs that loop. When you click the remove button It deletes the element the first time, then returns an error when it tries again and it doesn't exist. (Look at your for loop - if you add multiple Event Listeners they will stack).

A better idea would be to create the event listener when you create the DOM element to begin with. Try and stay away from creating the element in HTML and also adding it in Javascript. I've added a codepen as an example:

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

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

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论