如何使用filter方法删除数组元素并同步移除对应DOM节点

当前删除逻辑只修改了内存中存储的person数组，没有执行任何DOM更新操作，页面上已经渲染好的列表元素不会因为JS变量变化自动删除，所以会出现数据已更新但页面元素残留的异常。
另外你当前生成的列表HTML存在语义不规范问题：<ul>的直接子元素仅允许为<li>，你原有代码中把教育信息的<ul>直接嵌套在外层<ul>下，会被浏览器自动修正DOM结构，可能引发节点选择异常。

这里提供两种可直接落地的实现方式： #

方案1：数据驱动全量重渲染（推荐，适配你现有编码逻辑） #

把列表渲染逻辑抽为独立可复用函数，每次数据变更后清空容器，用最新数据重新生成全部列表内容插入即可，逻辑简单不容易出错。

1. 封装渲染函数，首次加载时调用一次完成初始渲染，同时修正HTML结构问题，给每个列表项绑定对应数据id：

let containerEl = document.querySelector(".container");
let person = [
    {
        id: 1,
        fname: 'john',
        birth: 'Jun 2018',
        education: {
            degree: 'MBA',
            university: 'University 1'
        }
    },
    {
        id: 2,
        fname: 'Singh',
        birth: 'Aug 2020',
        education: {
            degree: 'MA',
            university: 'University 2'
        }
    },
    {
        id: 3,
        fname: 'Alia',
        birth: 'Jan 2017',
        education: {
            degree: 'BA',
            university: 'University 3'
        }
    }
];

// 抽离的渲染函数
function renderPersonList() {
    // 先清空容器内旧内容
    containerEl.innerHTML = '';
    const markUp = person.map((item) => {
        return `<ul data-id="${item.id}">
            <li><span>Name:</span> ${item.fname}</li>
            <li><span>Birth:</span> ${item.birth}</li>
            <li>
                <p>Education</p>
                <ul>
                    <li><span>Degree:</span><span> ${item.education.degree}</span></li>
                    <li><span>University:</span><span> ${item.education.university}</span></li>
                </ul>
            </li>
            <li><button onclick="removeItem(${item.id})" class="deleteItem">Delete</button></li>
        </ul>`
    }).join(''); 
    containerEl.insertAdjacentHTML('afterbegin', markUp);
}

// 首次加载渲染列表
renderPersonList();

2. 修改删除函数，数据过滤完成后调用渲染函数同步视图：

function removeItem(id) {
    person = person.filter(currentItem => currentItem.id !== id);
    // 用最新数据重渲染列表
    renderPersonList();
}

方案2：定向删除对应DOM节点（无全量重渲染开销） #

如果列表数据量很大不想每次删除都重绘整个列表，可以给每个列表项绑定唯一标识，删除数据的同时直接移除对应的DOM节点即可。

1. 生成列表时和方案1一样，给每个外层<ul>加上data-id="${item.id}"自定义属性做节点标识，同时修正HTML结构问题，初始渲染逻辑和你原有代码一致，只需要补上自定义属性和结构修正即可。
2. 修改删除函数，在更新数据后直接查找对应节点移除：

function removeItem(id) {
    // 更新数据源
    person = person.filter(currentItem => currentItem.id !== id);
    // 查找对应DOM节点直接移除
    const targetNode = containerEl.querySelector(`ul[data-id="${id}"]`);
    targetNode?.remove();
}

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