如何用原生JavaScript选择动态添加的DOM元素？

你遇到的问题根源很明确：document.querySelector('.todolist__list__raw__trash')只能获取页面初始加载时就存在的第一个匹配元素，后续通过JS动态生成的元素在执行这段绑定代码时还没被创建，所以不会被绑定点击事件。

下面给你两种原生JS的解决方案：

方案一：事件委托（对应jQuery的$(document).on()逻辑） #

事件委托的核心是把事件绑定到一个已经存在的父容器（尽量选离目标元素最近的稳定父元素，比绑定到document性能更好），利用DOM的事件冒泡机制来处理动态元素的事件。

示例代码：

// 先找到待办列表的稳定父容器（比如你的.todolist__list）
const todoContainer = document.querySelector('.todolist__list');

// 给父容器绑定点击事件
todoContainer.addEventListener('click', function(e) {
  // 检查点击的目标是不是垃圾桶元素
  if (e.target.matches('.todolist__list__raw__trash')) {
    // 移除当前点击元素的父节点，和你jQuery的逻辑一致
    e.target.parentElement.remove();
  }
});

原理：不管后续新增多少个垃圾桶元素，它们的点击事件都会冒泡到父容器，通过e.target判断实际点击的元素，就能触发对应的删除逻辑。

方案二：创建动态元素时直接绑定事件 #

如果你是通过JS代码创建待办项元素的，可以在创建垃圾桶元素的同时，直接给它绑定点击事件。

示例代码：

// 假设你有一个创建待办项的函数
function addTodoItem(text) {
  // 创建待办项容器
  const rawItem = document.createElement('div');
  rawItem.className = 'todolist__list__raw';

  // 创建垃圾桶按钮
  const trashBtn = document.createElement('span'); // 或者button，看你实际标签
  trashBtn.className = 'todolist__list__raw__trash';
  trashBtn.textContent = '🗑️'; // 替换成你实际的垃圾桶图标/文本

  // 直接给垃圾桶绑定点击事件
  trashBtn.addEventListener('click', function() {
    // 移除当前待办项
    this.parentElement.remove();
  });

  // 组装元素并添加到列表
  rawItem.appendChild(trashBtn);
  // 假设todoContainer是之前获取的父容器
  todoContainer.appendChild(rawItem);
}

这种方法逻辑更直观，事件直接绑定在目标元素上，不需要依赖事件冒泡，适合逐个创建元素的场景。

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