如何使用过滤方法从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

最好使用一个函数来更新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来命名数组，因为它包含了许多person对象!

Answer 2

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

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