replaceChild执行顺序异常求助：任务移动后元素重复替换

核心问题 #

你代码里的document.querySelector('.complete')和document.querySelector('.card-date')是全局查找第一个匹配元素，不是当前操作的任务项内部元素。当完成多个任务时，每次点击check-btn都会修改第一个带.complete类的任务里的.card-date，而非刚移动过去的那个任务，这就导致第一个任务的.card-date被反复替换，最终出现重复的“Completed:”文本。

另外，你已经通过let task = item.parentElement.parentElement获取了当前操作的任务，后续没必要再用document.querySelector重新获取，直接用这个task对象查找内部元素即可。

修改后的代码 #

function statusCheck(e) {
const item = e.target;

if (item.classList.contains('trash-btn')) {
    const task = item.parentElement.parentElement;
    task.classList.add('vanish');
    task.addEventListener('transitionend', function(){
        task.remove();
    });
}

if (item.classList.contains('check-btn')) {
    // 直接获取当前操作的任务项
    const task = item.parentElement.parentElement;
    task.classList.add('complete');
    item.remove();
    completed.appendChild(task);

    // 从当前任务内部查找.card-date，而非全局查找
    const taskItem = task.querySelector('.card-date');
    // 刚给task加了complete类，这个判断可省略
    if (task.classList.contains('complete')) {
        const swapTask = taskItem.children[0];
        const swapTaskItem = document.createElement('span');
        swapTaskItem.classList.add('text-complete');
        swapTaskItem.innerText = 'Completed: ';
        taskItem.replaceChild(swapTaskItem, swapTask);
    }
}
}

补充说明 #

• 去掉重复的task = document.querySelector('.complete')，直接使用初始获取的当前任务对象，避免全局查找的错误。
• 用task.querySelector('.card-date')替代全局查找，确保只操作当前任务内部元素，不影响已完成的旧任务。
• 因为刚给task添加了complete类，if (task.classList.contains('complete'))这个判断可以直接删除，减少不必要的检查。

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