如何在JS中创建可从数组移除已删除项的动态列表？

你需要在删除段落的同时，找到对应内容在usernames数组中的位置并移除。这里有两种实用的解决方法，下面是修改后的完整代码：

方法一：通过索引删除（splice） #

let nameInput = document.getElementById('name');
let addButton = document.getElementById('button');
let output = document.getElementById('output')

let usernames = [];

addButton.addEventListener('click', function() {
    // 获取输入值并去除首尾空格，避免添加空内容
    const userName = nameInput.value.trim();
    if (!userName) return;

    usernames.push(userName);
    console.log(usernames);

    // 修正列表元素类型：用<li>作为列表项，而非<ul>
    let listItem = document.createElement('li');
    listItem.innerText = userName;
    output.appendChild(listItem);

    let deleteButton = document.createElement('button');
    deleteButton.innerHTML = "X";
    listItem.appendChild(deleteButton);

    deleteButton.addEventListener('click', function() {
        // 找到当前用户名在数组中的索引
        const index = usernames.indexOf(userName);
        if (index !== -1) {
            // 从数组中删除对应元素
            usernames.splice(index, 1);
            console.log(usernames);
        }
        // 移除页面上的列表项
        output.removeChild(listItem);
    })

    // 清空输入框，提升操作体验
    nameInput.value = '';
})

方法二：通过filter生成新数组（函数式风格） #

如果偏好不直接修改原数组，可以用filter生成新数组替换原数组：

deleteButton.addEventListener('click', function() {
    // 过滤掉当前用户名，生成新数组
    usernames = usernames.filter(item => item !== userName);
    console.log(usernames);
    output.removeChild(listItem);
})

关键改动说明 #

• 将重复获取的输入值存到变量userName中，减少DOM操作次数，也方便后续删除逻辑使用
• 增加输入值去空判断，防止空字符串被添加到数组
• 修正列表元素类型：原代码用<ul>作为列表项是错误的，改成<li>符合语义，同时变量名改为listItem更直观
• 删除按钮回调中，通过indexOf定位数组元素位置，用splice删除；或用filter生成不含当前元素的新数组
• 添加清空输入框的逻辑，优化用户操作流程

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