堆栈内存溢出
  简体   繁体   English

DOM 操作：如何在 javascript DOM 中动态地从 json 数据列表中删除元素

[英]DOM manupulation: how to remove an element from list of json data dymically in javascript DOM

 原文  2021-07-26 05:49:16  2   3    javascript/ dom

问题描述

i want to delete a row by clicking delete button which return an id from JSON data, i have created all the elements in DOM.我想通过单击从 JSON 数据返回 id 的删除按钮来删除一行，我已经在 DOM 中创建了所有元素。 i am trying to add delete function but it only delete the JSON data it does not delete the DOM.我正在尝试添加删除功能，但它只删除 JSON 数据，而不会删除 DOM。 I have tried the Object oriented way but i didn't know how to used them.我尝试过面向对象的方式，但我不知道如何使用它们。 it will be extremely helpful if there is any suggestion.如果有任何建议，这将非常有帮助。 

 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>

3 个解决方案

解决方案1
 1  2021-07-26 05:57:34

You need to delete all the html from inside .container and render everything again.您需要从.container删除所有 html 并再次渲染所有内容。

Edit: also, be careful trying to delete by the item's index in the array when you are in fact passing the userId to the deleteEle function.编辑：此外，当您实际上将userId传递给deleteEle函数时，请小心尝试按数组中项目的index进行删除。

You probably want to first find the index of the item that has the matching userId , then use this found index to remove the item from the array.您可能希望首先找到具有匹配userId的项目的index ，然后使用此找到的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>

解决方案2
 0 已采纳  2021-07-26 06:11:51

You can surely remove the data from DOM when you delete it from the list.当您从列表中删除数据时，您肯定可以从 DOM 中删除数据。 I would suggest a simple approach where you have to assign an id to all the main div that you create dynamically.我建议使用一种简单的方法，您必须为动态创建的所有主 div 分配一个 id。 And later when the deleteEle function is called you remove that from DOM.稍后当 deleteEle 函数被调用时，你从 DOM 中删除它。

Add following line to createEle function of yours将以下行添加到您的 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***
}

Update your deleteEle as follows更新您的 deleteEle 如下

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

解决方案3
 0  2021-07-26 06:41:23

Create an attribute ID with the div and you can use it when you want to delete data from DOM用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);

} }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 JavaScript DOM 移除元素 - JavaScript DOM remove element 如何使用Javascript从DOM元素中删除属性？ - How to remove an attribute from a DOM element using Javascript? 使用javascript从DOM树中删除p元素 - remove p element from DOM tree with javascript 骨干/ Javascript从dom中删除元素 - Backbone/Javascript remove element from dom 从 DOM 中删除元素 - Remove element from the DOM 如何在 Javascript 中通过 TagName 或 Id 删除 Dom 元素 - How to remove Dom Element by TagName or Id in Javascript 如何从DOM和内存中删除DOM元素？ - How to Remove DOM Element From DOM and From Memory? 如何从DOM元素中删除事件侦听器？ - How to remove event listener from DOM element? 如何从javascript中的DOM结构派生JSON数据？ - How to derive JSON data from the DOM structure in javascript? 如何从指令中查找和删除DOM元素？ - How find and remove DOM element from directive?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM