如何移除异步生成DOM节点的激活类，再为目标节点新增对应类？

实现方案 #

你可以直接用jQuery自带的DOM操作方法实现，代码更简洁，也可以用原生DOM API实现，两种写法如下：

jQuery写法（推荐）

$(".custom-collection-pagination-list").on('click', '.custom-collection-pagination__item', function(e) {
  // 查找当前点击项的所有同级分页项，统一移除激活类
  $(this).siblings('.custom-collection-pagination__item').removeClass('paginate-active');
  // 给当前点击项添加激活类，$(this)直接指向触发事件的li元素，避免target指向子元素的问题
  $(this).addClass('paginate-active'); 
})

原生DOM API写法

$(".custom-collection-pagination-list").on('click', '.custom-collection-pagination__item', function(e) {
  // e.currentTarget固定指向绑定了事件的li元素，避免点击li内部子元素时target指向错误
  const currentItem = e.currentTarget;
  // 拿到父容器下所有分页项
  const allPaginationItems = currentItem.parentElement.querySelectorAll('.custom-collection-pagination__item');
  // 遍历移除所有激活类
  allPaginationItems.forEach(item => item.classList.remove('paginate-active'));
  // 给当前点击项添加激活类
  currentItem.classList.add('paginate-active'); 
})

注意事项 #

建议替换原代码里的e.target为e.currentTarget，如果你的li标签内部还有其他子元素（比如数字文本、图标等），点击子元素时e.target会指向子元素而非li本身，导致加类失败。

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