如何仅在标签元素加载完成后触发删除事件？

嘿，这个坑我之前也踩过！你说得没错，报错的原因就是页面初始化时那些标签元素根本还没被创建出来，你用document.getElementsByClassName拿到的tagsRemover其实是个空的集合，自然没法给undefined设置onclick属性啦。下面给你两种简单靠谱的解决办法：

方法一：创建标签时直接绑定事件 #

这是最直观的方式——每生成一个标签，就立刻给它的删除按钮绑定点击事件，完全不用管元素什么时候加载完成。修改你的showTags函数就行：

let showTags = () => {
  if(tagsContainer.length > 0) {
    tagsContainer.forEach((element) => {
      let container = document.createElement('LI');
      container.innerHTML = '<span class="removeTag">&#10006;&nbsp;</span>'+element;
      container.className = 'tags';
      
      // 给当前标签的删除按钮绑定事件
      const removeBtn = container.querySelector('.removeTag');
      removeBtn.onclick = () => {
        container.style.display = 'none';
      };
      
      ul.appendChild(container);
    });
    tagsContainer = [];
    tagsInput.value = '';
  }
}

这样一来，每个新生成的标签刚被创建出来，就带着自己的删除事件了，逻辑清晰又好用~

方法二：利用事件委托（更推荐） #

如果后续要生成大量标签，或者不想每次创建元素都绑定事件，那就用事件委托——借助事件冒泡的特性，给父元素（这里就是<ul id="ul">）绑定一次事件，然后判断点击的目标是不是删除按钮。这样不管什么时候生成的标签，删除按钮的点击事件都能被捕获到：

首先删掉你原来写的那个debug用的for循环，然后添加这段代码：

// 给父元素ul绑定点击事件
ul.addEventListener('click', (e) => {
  // 判断点击的是不是删除按钮
  if(e.target.classList.contains('removeTag')) {
    // 找到对应的标签li并隐藏
    e.target.closest('.tags').style.display = 'none';
  }
});

这种方法的好处是只需要绑定一次事件，性能更优，而且不管后续怎么动态添加标签，都能正常触发删除逻辑，特别适合动态元素较多的场景。

最后提醒一下：原来的tagsRemover和tagsElemnts是动态的HTMLCollection，但因为初始化时元素不存在，所以循环操作肯定会报错，记得把那段循环代码删掉哦！

内容的提问来源于stack exchange，提问作者Axel