如何动态修改创建元素的ID值以匹配数组中项的索引？

我正在开发一个待办事项列表，每创建一个项目就会给对应的DOM元素分配一个自增的ID值，但删除项目后，不知道如何让这些ID值匹配数组中项的索引。使用splice修改数组后，元素ID和渲染项的索引不再对应，点击项目可以查看对应的元素ID值。

解决方法 #

核心优化点 #

• 放弃用数组索引关联DOM元素和数组项目，改用每个项目的独立唯一ID（在Project类中添加id属性），避免数组变化导致的索引混乱。
• 删除项目后，重新渲染整个项目列表，确保DOM元素的ID与数组中项目的ID完全对应。
• 简化删除逻辑，直接通过项目对象定位数组中的位置。

修改后的代码 #

HTML部分

<button id="add">add</button>
<div id="project-list" class="project-list"></div>

JavaScript部分

// 单个项目类，添加独立id属性
class Project {
    constructor(name, id) {
        this.name = name;
        this.id = id;
        this.tasksArr = [];
    }
    get nameOfProject() {
        return this.name;
    }
    addTasksToProject(name, dueDate) {
        let newTask = new Task(name, dueDate);
        this.tasksArr.push(newTask);
    }
}

// 项目组类，维护全局自增id
class Projects {
    constructor() {
        this.nextProjectId = 1;
        this.listOfProjects = [new Project("Sample Project", this.nextProjectId++)];
    }
    addProjectToList(name) {
        let p = new Project(name, this.nextProjectId++);
        this.listOfProjects.push(p);
        return p;
    }
    get allProjects() {
       return this.listOfProjects;
    }
    get numOfProjects() {
        return this.listOfProjects.length;
    }
    // 添加删除方法，通过id删除项目
    deleteProjectById(id) {
        this.listOfProjects = this.listOfProjects.filter(project => project.id !== id);
    }
}

let projects = new Projects();
let selectedProj = null;

// 渲染所有项目的方法，每次删除后重新调用
function renderAllProjects() {
    const projectDom = document.getElementById("project-list");
    // 清空现有DOM
    projectDom.innerHTML = "";
    projects.allProjects.forEach(project => {
        const newProjectDiv = document.createElement("div");
        const dltBtn = document.createElement("button");
        
        newProjectDiv.textContent = project.nameOfProject;
        dltBtn.textContent = "delete";
        newProjectDiv.classList.add("project-item");
        newProjectDiv.appendChild(dltBtn);
        // 用项目自身的id作为DOM元素id
        newProjectDiv.id = `project-${project.id}`;
        
        // 删除按钮逻辑
        dltBtn.addEventListener("click", (e) => {
            e.stopPropagation(); // 阻止事件冒泡到父元素的点击事件
            projects.deleteProjectById(project.id);
            renderAllProjects(); // 重新渲染所有项目
        });
        
        // 选择项目逻辑，通过项目id查找
        newProjectDiv.addEventListener("click", () => {
            const currentProj = projects.allProjects.find(p => p.id === project.id);
            console.log(currentProj);
            console.log(currentProj.name);
        });
        
        projectDom.append(newProjectDiv);
    });
}

// 初始化渲染
renderAllProjects();

// 添加项目按钮事件
const addBtn = document.getElementById("add");
addBtn.addEventListener("click", addProjectBtn);

function addProjectBtn() {
    let projName = prompt("name");
    if (projName) { // 空值不添加
        projects.addProjectToList(projName);
        renderAllProjects();
        console.log(projects.allProjects);
    }
}

说明 #

• 给Project类添加了id属性，由Projects类的nextProjectId自增维护，确保每个项目ID唯一且不重复。
• 删除项目时通过ID过滤数组，然后重新渲染整个列表，保证DOM元素ID和项目ID完全对应，不会出现索引不匹配的问题。
• 点击项目时通过项目ID查找对应的数组项，不再依赖数组索引，避免了数组变化导致的错误。

内容的提问来源于stack exchange，提问作者Alana Rêyes