运行displayBooks()后生成的remove-book按钮无法绑定点击事件如何解决

你的事件绑定逻辑执行时，displayBooks() 函数尚未运行，类名为remove-book的元素还没有被插入到DOM中，所以你提前查询到的buttons集合里不包含这类动态生成的按钮，绑定自然不会生效。

这是处理动态生成元素事件绑定的最优方案，不用每次新增元素都重复绑定逻辑：
你可以把事件绑定在所有remove-book按钮的共同父级容器上（比如存放书籍列表的容器，可根据你实际的DOM结构替换选择器），利用事件冒泡机制判断触发事件的元素是否是目标删除按钮：

// 替换#book-list为你实际的书籍列表父容器选择器
document.querySelector('#book-list').addEventListener('click', (e) => {
  if (e.target.classList.contains('remove-book')) {
    // 执行原有的删除逻辑，e.target就是被点击的删除按钮
    doThis(e.target);
  }
})

这个方案的优势是无论后续新增多少个删除按钮，都不需要重新执行绑定逻辑，性能更优，维护成本更低。

你也可以在displayBooks()函数内部，创建remove-book按钮的同时直接绑定事件：

// 以下是displayBooks内创建删除按钮的示例逻辑
const removeBtn = document.createElement('button');
removeBtn.classList.add('remove-book');
// 创建后直接绑定事件
removeBtn.addEventListener('click', doThis);
// 再将按钮插入到DOM节点中
bookItem.appendChild(removeBtn);

额外优化提示：你原有代码中用button.className === 'remove-book'判断类名的方式存在缺陷，如果元素有多个类名就会匹配失败，建议统一替换为button.classList.contains('remove-book')的写法。

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