如何使用过滤器方法从 DOM 中删除数组元素？

Question

1. 我正在使用 insertAdjacentHTML 添加数据

<div class="container"></div> 

2. 然后我定义容器变量如下
   

 let containerEl = document.querySelector(".container");

3. 在数组中添加数据
   

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'
                        }
                    }
    
                ]; 

4. 然后我使用 map 函数遍历数据
   

const markUp = person.map((item) => {
                return `<ul>
                                    <li><span>Name:</span> ${item.fname}</li>
                                    <li><span>Birth:</span> ${item.birth}</li>
                                    <ul>
                                        <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>
                                    </ul> 
                                    <li><button onclick="removeItem(${item.id})" class="deleteItem">Delete</button></li>
                            </ul>`
            }).join(''); 
containerEl.insertAdjacentHTML('afterbegin', markUp); 

5. 在 DOM 中显示数据后，我想在单击 DELETE 按钮时从中删除，但这不起作用，我可以从数组中删除数据，但无法从 dom 中删除。

function removeItem(id) {
    person = person.filter(currentId => currentId.id !== id);
} 

Answer 1

您需要定义removeItem函数来删除项目。

function removeItem() {
    this.parentNode.remove()
}

Answer 2

最好使用更新DOM的函数，每次删除项目时，从数组中删除并将数据重新渲染到DOM

 let persons = [ { 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", }, }, ]; let containerEl = document.querySelector(".container"); function renderToDOM(persons) { const markUp = persons .map((item) => { return `<ul> <li><span>Name:</span> ${item.fname}</li> <li><span>Birth:</span> ${item.birth}</li> <ul> <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> </ul> <li><button onclick="removeItem(${item.id})" class="deleteItem">Delete</button></li> </ul>`; }) .join(""); containerEl.innerHTML = markUp; } //first render it to The dom renderToDOM(persons); function removeItem(id) { persons = persons.filter((currentId) => currentId.id !== id); renderToDOM(persons); }

 <div class="container"></div>

注意：最好用复数的名字数组，因为它包含许多persons的对象！