Javascript 发布将列表项从一个ul元素移动到另一个ul元素的命令

当选中复选框时，我尝试将单个li元素从一个ul移动到另一个ul

完整代码可在此处找到：

下面是我移动li项的函数

ul.addEventListener('change', (e) => {
    const checkbox = e.target;
    const checked = checkbox.checked;
    const listItem = e.target.parentNode.parentNode;
    const completedItems = 
document.querySelector('.completedItems');
    const label = document.querySelector('.completedLabel');
   if (checked) {
        completedItems.appendChild(listItem);
        label.style.display = 'none';
    }
});

---

一旦li移动到另一个ul，包含标签和复选框的子范围将消失。此功能在第一个子li移动时起作用，但在第一个子li移动后的li不起作用。此外，第一个li的跨度消失，因此无法移动到另一个ul

看起来您需要全局使用

.completedLabel

选择器，而您只需要在单击的项目中搜索它

将查询选择器的范围缩小到您存储在列表项中的元素可能有效。以下是一个例子：

const label = listItem.querySelector('.completedLabel');

这样就可以重用示例代码：

//选中复选框时，将li项移动到已完成列表
ul.addEventListener（‘变更’，（e）=>{
const checkbox=e.target；
const checked=checkbox.checked；
const listItem=e.target.parentNode.parentNode；
const completedItems=document.querySelector（'.completedItems'）；
const label=listItem.querySelector（'.completedLabel'）；
如果（选中）{
completedItems.appendChild（listItem）；
label.style.display='none'；
}
});您是否介意重新考虑解决此案件的策略？建议使用数组和对象等数据，而不是DOM节点

请考虑这个例子

const form=document.forms.form；
const todoList=document.querySelector（“#todoList”）；
const completedList=document.querySelector（“#completedList”）；
常量任务=[]；
表.addEventListener（'submit'，handleSubmit，true）；
todoList.addEventListener（'change'，handleInputChange，true）；
函数handleSubmit（事件）{
event.preventDefault（）；
const task=this.task；
如果（task.value==''）{
回来
}
const item=createTask（task.value）；
任务。推送（项目）；
task.value=''；
syncTodoList（）；
}
函数handleInputChange（事件）{
const target=event.target；
如果（target.nodeName==='INPUT'）{
const id=event.target.id；
const task=tasks.find（task=>task.id==parseInt（id，10））；
task.status=‘已完成’；
syncTodoList（）；
syncCompletedList（）；
}
}
函数createTask（任务）{
返回{
id:Date.now（），
文本：任务，
状态：“待办事项”
};
}
函数syncTodoList（）{
const todos=任务
.filter（任务=>task.status=='todo'）
.map（任务=>`
${task.text}
`）
.加入（“”）；
todoList.innerHTML=todos；
}
函数syncCompletedList（）{
const completeds=任务
.filter（任务=>task.status===“已完成”）
.map（任务=>`
${task.text}
`）
.加入（“”）；
completedList.innerHTML=completeds；
}

邮寄
待办事项


完成

谢谢你的建议，我会仔细看看的！我对JS还相当陌生，对最佳实践还没有很好的把握