待办列表元素删除方法及设置元素ID报错问题求助

原问题代码与报错 #

HTML代码：

<form>
    <input type="text" id="to-do-input" placeholder="Add new task..">
    <button id="add-to-do" type="button">Add ToDo</button>
</form>
<div id="to-do-container">
</div>

JavaScript代码：

var addButton = document.getElementById("add-to-do");
toDoArray = [];

addButton.addEventListener("click", function() {
    let nHTML = '';
    let todoValue = document.getElementById("to-do-input").value;
    toDoArray.push(todoValue);
    
    toDoArray.forEach( function(item) {
        // 尝试给每个待办项设置ID
        var itemId = item.replace(' ','');
        item.setAttribute("id", itemId); // 控制台报错：item.setAttribute is not a function

        nHTML += '<li>' + item + '  <button id="delete">Remove</button> </li>';
    });
    document.getElementById("to-do-container").innerHTML = '<ul>' + nHTML + '</ul>';
    document.getElementById("to-do-input").value = '';
});

控制台报错：

app.js:17 Uncaught TypeError: item.setAttribute is not a function
    at app.js:17:26
    at Array.forEach (<anonymous>)
    at HTMLButtonElement.<anonymous> (app.js:14:27)

需求：

1. 解决设置ID的报错，让每个待办项的ID为内容去除空格后的字符串
2. 实现待办项的删除功能

报错原因与修正 #

报错核心是：item是数组里的字符串值，不是DOM元素，只有DOM元素才有setAttribute方法。要给生成的<li>设置ID，直接在拼接HTML字符串的时候把ID属性加进去即可。另外注意replace(' ', '')只会替换第一个空格，要去掉所有空格，得用正则表达式replace(/\s+/g, '')。

修正后的JavaScript代码：

var addButton = document.getElementById("add-to-do");
// 用const声明数组，避免全局变量污染
const toDoArray = [];

addButton.addEventListener("click", function() {
    let nHTML = '';
    const todoValue = document.getElementById("to-do-input").value.trim();
    // 空值不添加，避免无效待办项
    if (!todoValue) return;
    
    toDoArray.push(todoValue);
    
    toDoArray.forEach(function(item) {
        const itemId = item.replace(/\s+/g, '');
        // 直接在li标签中嵌入id属性
        nHTML += `<li id="${itemId}">${item}  <button class="delete-btn" data-id="${itemId}">Remove</button> </li>`;
    });
    
    document.getElementById("to-do-container").innerHTML = `<ul>${nHTML}</ul>`;
    document.getElementById("to-do-input").value = '';
});

删除功能实现 #

通过事件委托实现删除逻辑（避免每次生成新元素都重复绑定事件），步骤如下：

1. 将删除按钮的id="delete"改为class="delete-btn"（ID不能重复，多元素用class）
2. 给按钮添加data-id属性，关联对应待办项的ID
3. 监听容器的点击事件，判断点击对象为删除按钮时，执行DOM删除和数组更新

完整JavaScript代码（包含删除功能）：

var addButton = document.getElementById("add-to-do");
const toDoArray = [];
const toDoContainer = document.getElementById("to-do-container");

addButton.addEventListener("click", function() {
    let nHTML = '';
    const todoValue = document.getElementById("to-do-input").value.trim();
    if (!todoValue) return;
    
    toDoArray.push(todoValue);
    
    toDoArray.forEach(function(item) {
        const itemId = item.replace(/\s+/g, '');
        nHTML += `<li id="${itemId}">${item}  <button class="delete-btn" data-id="${itemId}">Remove</button> </li>`;
    });
    
    toDoContainer.innerHTML = `<ul>${nHTML}</ul>`;
    document.getElementById("to-do-input").value = '';
});

// 事件委托处理删除
toDoContainer.addEventListener("click", function(e) {
    if (e.target.classList.contains("delete-btn")) {
        const targetId = e.target.dataset.id;
        // 从DOM中移除对应待办项
        document.getElementById(targetId).remove();
        // 从数组中删除对应项
        const index = toDoArray.findIndex(item => item.replace(/\s+/g, '') === targetId);
        if (index !== -1) {
            toDoArray.splice(index, 1);
        }
    }
});

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