如何将标签文本置于自定义span复选框右侧？附动态删除按钮问题

问题1：动态添加项的label文本位置错误 #

原因 #

硬编码的label结构是先放置自定义checkbox的<span>，再添加文本；但动态创建时，你先通过label.textContent设置了文本内容，再将spanCB追加到label末尾，导致文本出现在自定义checkbox左侧，和预期结构相反。另外，所有动态生成的input都使用同一个id="input"，会导致label与checkbox的关联混乱，必须修正为唯一id。

修复代码 #

修改addToList函数中label的创建逻辑，调整元素顺序并生成唯一id：

function addToList() {
  // 生成唯一id，避免重复关联
  const uniqueId = `task-${Date.now()}`;
  
  const input = document.createElement('input'); 
  input.className = 'input__cb';
  input.id = uniqueId;
  input.type = 'checkbox';
  
  const spanCB = document.createElement('span');
  spanCB.className = 'custom__checkbox';
  
  const label = document.createElement('label');
  label.className = 'todo__label';
  label.setAttribute('for', uniqueId);
  // 先添加自定义checkbox，再添加文本节点
  label.appendChild(spanCB);
  label.appendChild(document.createTextNode(usrInput.value));
  
  // 其余代码保持不变...
}

问题2：删除按钮对动态添加项无效 #

方案1：事件委托（推荐，简洁高效） #

无需监听DOM变化，直接给父列表元素绑定点击事件，利用事件冒泡判断点击目标是否为删除按钮：

// 替换原有的删除按钮绑定代码
const todoList = document.querySelector('.todo__list');
todoList.addEventListener('click', e => {
  const deleteBtn = e.target.closest('.btn-del');
  if (deleteBtn) {
    const listItem = deleteBtn.closest('.todo__list--item');
    listItem.remove();
    itemCount.textContent = document.querySelectorAll('.todo__list--item').length;
  }
});

方案2：Mutation Observer（监听DOM变化） #

如果需要通过监听DOM变更实现，可使用Mutation Observer检测新添加的列表项，自动为删除按钮绑定事件：

// 替换原有的删除按钮绑定代码
const todoList = document.querySelector('.todo__list');

// 绑定删除事件的通用函数
function bindDeleteEvent(btn) {
  btn.addEventListener('click', e => {
    const listItem = e.target.closest('.todo__list--item');
    listItem.remove();
    itemCount.textContent = document.querySelectorAll('.todo__list--item').length;
  });
}

// 初始绑定已有按钮
document.querySelectorAll('.btn-del').forEach(bindDeleteEvent);

// 监听列表DOM变化
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('todo__list--item')) {
        const newBtn = node.querySelector('.btn-del');
        bindDeleteEvent(newBtn);
      }
    });
  });
});

observer.observe(todoList, { childList: true });

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