Vanilla JS数据筛选后无法渲染新列表问题求助

我是编程新手，尝试实现点击删除按钮时筛选数据列表，展示ID不等于被删除ID的条目，但点击删除后无法在页面渲染更新后的列表。以下是我的代码：

HTML Code #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css" > 
    <title>Document</title>
</head>
<body>
    <div id="container" class="container"></div>
    <script src="./index.js"></script>
</body>
</html>

JavaScript Code #

const monstersEl = document.getElementById("container")
const list = document.createDocumentFragment();

getData();

async function getData(){
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    const resData = await res.json();
    displayData(resData);
}

function filterMonster(data, id){
    const monsters = data.filter((elem) => elem.id !== id);
    displayData(monsters)
    console.log(monsters)
}

function displayData(data){
    data.map((monsters) => {
       const monster = `
          <h1 class="monster">${monsters.name}</h1>
          <h3>${monsters.username}</h3>
          <h3>${monsters.email}</h3>
          <button id="btn" class="btn">Delete</button>
       `;
       const item = document.createElement("div");
       item.classList.add("items")
       item.innerHTML = monster
       const btn = item.querySelector(".btn");
       btn.addEventListener("click", () => {
         filterMonster(data, monsters.id)
       })
       list.appendChild(item)
    })
    monstersEl.appendChild(list)
}

我已尝试执行筛选逻辑，但无法在点击删除按钮后在页面渲染新的列表。

问题原因 #

你的代码存在两个核心问题导致页面不更新：

• 容器未清空：每次调用displayData时，没有清除container内的旧元素，新元素只是追加到原有内容后，旧条目不会消失，视觉上看起来列表没变化。
• 文档片段复用：全局的list文档片段仅创建一次，每次调用displayData都会往其中添加新元素，重复追加到容器后会造成元素累积，无法替换旧内容。

修正后的JavaScript代码 #

const monstersEl = document.getElementById("container")

getData();

async function getData(){
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    const resData = await res.json();
    displayData(resData);
}

function filterMonster(data, id){
    const monsters = data.filter((elem) => elem.id !== id);
    displayData(monsters)
    console.log(monsters)
}

function displayData(data){
    // 清空容器内的旧内容
    monstersEl.innerHTML = '';
    // 每次渲染新建文档片段，避免元素累积
    const list = document.createDocumentFragment();

    data.map((monsters) => {
       const monster = `
          <h1 class="monster">${monsters.name}</h1>
          <h3>${monsters.username}</h3>
          <h3>${monsters.email}</h3>
          <button class="btn">Delete</button>
       `;
       const item = document.createElement("div");
       item.classList.add("items")
       item.innerHTML = monster
       const btn = item.querySelector(".btn");
       btn.addEventListener("click", () => {
         filterMonster(data, monsters.id)
       })
       list.appendChild(item)
    })
    monstersEl.appendChild(list)
}

修改说明 #

1. 将list文档片段的创建移至displayData内部，确保每次渲染都使用全新的片段，避免旧元素累积。
2. 在displayData开头添加monstersEl.innerHTML = '';，清空容器中的旧元素，确保每次渲染的都是最新筛选后的列表。
3. 移除了按钮的重复id属性（多个元素使用相同id不符合HTML规范，保留class即可）。

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