单页面多ID克隆异常：已完成任务无法转移至未完成列表

你遇到的问题根源在于：克隆任务元素时保留了原元素的ID，后续通过ID选择器删除原元素时，会误删刚添加到DOM中的克隆元素（因为DOM中出现了重复ID，jQuery会匹配第一个出现的元素）。而交换两个任务容器的位置后，重复ID元素的DOM顺序反转，误删的对象也跟着反转，导致原本失效的功能恢复、正常的功能失效。

修复后的代码 #

$("body").on("click", ".incompletetasklist", function () {
    var incomp_task = $(this).clone()
        .addClass('completetasklist bg-infolight')
        .removeClass('incompletetasklist');
    $('#quicktaskcomplete').prepend(incomp_task);
    // 直接删除当前点击的原元素，无需通过ID选择器
    $(this).remove();
});

// 已完成任务转未完成任务
$("body").on("click", ".completetasklist", function () {
    var comp_task = $(this).clone()
        .addClass('incompletetasklist')
        .removeClass('bg-infolight completetasklist');
    $('#quicktaskincomplete').prepend(comp_task);
    // 直接删除当前点击的原元素
    $(this).remove();
});

关键修改点 #

• 删除逻辑优化：将$("#"+id).remove()替换为$(this).remove()，this指向当前触发点击事件的原元素，确保删除的是被点击的任务项，不会因为重复ID误删克隆元素。
• 类名操作简化：将连续的addClass/removeClass合并，提升代码可读性。

这样修改后，无论两个任务容器的顺序如何，双向转移功能都能正常工作，克隆的元素会正确添加到目标列表，原元素也会被准确删除。

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