-1

我想通过单击从 JSON 数据返回 id 的删除按钮来删除一行，我已经在 DOM 中创建了所有元素。我正在尝试添加删除功能，但它只会删除 JSON 数据，不会删除 DOM。我尝试过面向对象的方式，但我不知道如何使用它们。如果有任何建议将非常有帮助。

let names = {
  nameList: [{
      userId: 1,
      name: "abc",
      age: "25",
    },
    {
      userId: 2,
      name: "def",
      age: "23",
    },
    {
      userId: 3,
      name: "ghi",
      age: "18",
    },
    {
      userId: 4,
      name: "jkl",
      age: "19",
    },
  ],
  find: function() {
    console.log("Find function");
  },
  add: function() {
    return this.nameList[1];
  },
  delete: function() {
    console.log("Delete function");
  },
};



const createEle = (data, idx) => {
  let main = document.createElement("div");
  let container = document.getElementById("container");
  let title = document.createElement('div');
  let age = document.createElement('div');
  let remove = document.createElement('div');
  let update = document.createElement('div');
  main.className = "main";
  title.className = "title";
  age.className = "age";
  remove.className = "delete";
  update.className = "update";

  container.appendChild(main);
  main.appendChild(title);
  main.appendChild(age);
  main.appendChild(update);
  main.appendChild(remove);

  remove.addEventListener("click", deleteEle.bind(event, idx));

  title.append(data.name);
  age.append(data.age);
  update.append("Edit");
  remove.append("Delete");

}

const displayData = () => {
  names.nameList.map(data => {
    createEle(data, data.userId);

  });
}

const deleteEle = (idx) => {
  names.nameList.splice(idx - 1, 1)
  console.log("deleted", idx, names.nameList);
}



displayData();
<!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">
  <title>Todo list</title>
  <link rel="stylesheet" href="./style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>

<body>
  <div class="search">
    <input type="text" value="" class="input">
    <button class="find">Find</button>
    <button class="add">Add</button>
  </div>
  <div class="container" id="container"></div>
  <script src="./script.js"></script>
</body>

</html>

4

3 回答 3

1

您需要从内部删除所有 html.container并重新渲染所有内容。

index编辑：另外，当您实际上将 传递userId给deleteEle函数时，请小心尝试删除数组中的项目。

您可能希望首先找到index具有匹配项的userId，然后使用找到index的项从数组中删除该项。

let nameList = [{
    userId: 1,
    name: "abc",
    age: "25",
  },
  {
    userId: 2,
    name: "def",
    age: "23",
  },
  {
    userId: 3,
    name: "ghi",
    age: "18",
  },
  {
    userId: 4,
    name: "jkl",
    age: "19",
  },
];

let container = document.getElementById("container");


const createEle = (data, userId) => {
  let main = document.createElement("div");
  let title = document.createElement('div');
  let age = document.createElement('div');
  let remove = document.createElement('button');

  main.className = "main";
  title.className = "title";
  age.className = "age";
  remove.className = "delete";

  main.appendChild(title);
  main.appendChild(age);
  main.appendChild(remove);

  remove.addEventListener("click", deleteEle.bind(event, userId));

  title.append(data.name);
  age.append(data.age);
  remove.append("Delete");

  container.appendChild(main);
}

const displayData = () => {
  nameList.map(data => {
    createEle(data, data.userId);
  });
}

const deleteEle = (userId) => {
  const indexToDelete = nameList.findIndex(item => item.userId === userId)
  if (indexToDelete !== -1) {
    nameList.splice(indexToDelete, 1)
  }


  container.innerHTML = "";
  displayData();
}



displayData();
.main {
  display: flex;
  justify-content: space-evenly;
}
<div class="container" id="container"></div>

于 2021-07-26T05:57:34.967 回答
0

当您从列表中删除数据时，您肯定可以从 DOM 中删除数据。我会建议一种简单的方法，您必须为您动态创建的所有主 div 分配一个 id。稍后当调用 deleteEle 函数时，您将其从 DOM 中删除。

将以下行添加到您的 createEle 函数

const createEle = (data, idx) => {
*** rest code***
  let remove = document.createElement('div');
  let update = document.createElement('div');
  main.id =idx; //NEW LINE ADDED
  main.className = "main";
*** rest code***
}

按如下方式更新您的 deleteEle

const deleteEle = (idx) => {
  names.nameList.splice(idx - 1, 1)
  console.log("deleted", idx, names.nameList);
  document.getElementById(idx).remove();
}
于 2021-07-26T06:11:51.320 回答
0

用 div 创建一个属性 ID，当你想从 DOM 中删除数据时可以使用它

const createEle = (data, idx) => {
   let main = document.createElement("div");
   let id = document.createAttribute("id");
   let container = document.getElementById("container");
   let title = document.createElement('div');
   let age = document.createElement('div');
   let remove = document.createElement('div');
   let update = document.createElement('div');
   main.className = "main";
   main.id=data.userId;
   title.className = "title";
   age.className = "age";
   remove.className = "delete";
   update.className = "update";

   container.appendChild(main);
   main.appendChild(title);
   main.appendChild(age);
   main.appendChild(update);
   main.appendChild(remove);

   remove.addEventListener("click", deleteEle.bind(event, idx));

   title.append(data.name);
   age.append(data.age);
   update.append("Edit");
   remove.append("Delete");
 }

const deleteEle = (idx) => {
  let id =document.getElementById(idx);
  console.log("deleting", id);
  id.remove();
  names.nameList.splice(idx - 1, 1)
  console.log("deleted", id, names.nameList);

}

于 2021-07-26T06:41:23.970 回答