如何创建删除函数从HTML列表及填充数组中移除指定项？

核心问题分析 #

原代码存在三个关键问题导致删除功能失效：

• populateList 每次调用会追加元素而非替换，引发重复渲染
• 关闭按钮的事件仅绑定在初始渲染的元素上，新增列表项无点击响应
• 删除逻辑未关联DOM元素与数组数据，无法精准定位待删除项

修改后的完整代码 #

// 初始列表数据
let arr = ['apples', 'pears', 'blackberries', 'blueberries'];
// 缓存列表容器DOM节点，避免重复查询
const listContainer = document.getElementById('itemList');

// 重构列表渲染函数：先清空再渲染，保证数据与视图同步
const populateList = (array) => {
    // 清空现有列表内容
    listContainer.innerHTML = '';
    
    array.forEach(itemText => {
        const listItem = document.createElement('li');
        // 用textContent设置文本，避免HTML拼接风险
        listItem.textContent = itemText;
        
        // 创建关闭按钮元素
        const closeBtn = document.createElement('span');
        closeBtn.className = 'close';
        closeBtn.textContent = '\u00D7';
        listItem.appendChild(closeBtn);
        
        listContainer.appendChild(listItem);
    });
};

// 新增列表项函数
function updateList() {
    const inputVal = document.getElementById('input').value.trim();
    if (!inputVal) {
        alert('请输入内容！');
        return;
    }
    arr.push(inputVal);
    document.getElementById('input').value = '';
    // 重新渲染整个列表，保持数据一致
    populateList(arr);
}

// 事件委托：绑定到父容器，处理所有关闭按钮的点击（包括新增项）
listContainer.addEventListener('click', (e) => {
    // 判断点击目标是否为关闭按钮
    if (e.target.classList.contains('close')) {
        const listItem = e.target.parentElement;
        // 获取要删除的文本（去除关闭按钮的内容）
        const deleteText = listItem.textContent.slice(0, -1).trim();
        // 定位数组中对应的项并删除
        const targetIndex = arr.findIndex(item => item === deleteText);
        if (targetIndex !== -1) {
            arr.splice(targetIndex, 1);
            // 重新渲染列表
            populateList(arr);
        }
    }
});

// 初始渲染列表
populateList(arr);

关键修改说明 #

• 重构populateList：每次渲染前清空列表，采用元素创建替代HTML拼接，更安全易维护
• 事件委托：将点击事件绑定到列表容器而非单个按钮，确保新增项也能触发删除逻辑
• 精准删除逻辑：通过点击元素的父节点获取待删文本，用findIndex定位数组项，删除后重新渲染保证数据同步
• 输入优化：用trim()处理输入，避免空字符串或空格被误添加

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