如何从 db.json 中删除动态创建的元素

Question

我正在尝试使用 db.json 动态创建卡片，并添加 - 删除、编辑、添加新功能。 然而，由于每张卡片都有自己的删除按钮，我很难将它们附加到相应的卡片上。 此外，当尝试注销所有卡片、所有删除按钮或其他动态创建的元素时，它们会返回空箭头。

这是代码：

import axios from 'axios';

const mainWrapper  = document.querySelector('.js-main-wrapper') as HTMLDivElement


type Card = {
  id: number,
  title: string,
  image: string,
  text: string
}


const getData = (data: Card[]) => {
  
  data.forEach(obj => {

    //CARD
    const card = document.createElement("div");
    card.classList.add("card");
    card.classList.add("js-card");
    mainWrapper.appendChild(card);
  
    //IMG-SECTION
    const imgSection = document.createElement("div");
    imgSection.classList.add("img__section");
    card.appendChild(imgSection);
  
    //TEXT-SECTION
    const txtSection = document.createElement("div");
    txtSection.classList.add("text__section");
    card.appendChild(txtSection);
  
    //BUTTON SECTION
    const btnSection = document.createElement("div");
    btnSection.classList.add("btn__section");
    card.appendChild(btnSection);
  
    //IMAGE
    const image = document.createElement("img") as HTMLImageElement
    image.classList.add("image");
    image.src = `${obj.image}`
    imgSection.appendChild(image);
    
    //TITLE
    const title = document.createElement("h4");
    title.classList.add("title");
    title.innerHTML = `${obj.title}`;
    txtSection.appendChild(title);
    
    //TEXT
    const text = document.createElement("p");
    text.classList.add("text");
    text.innerHTML = `${obj.text}`;
    txtSection.appendChild(text);
  
    //EDIT BUTTON
    const editBtn = document.createElement("button");
    editBtn.classList.add("edit__btn");
    editBtn.classList.add("js-edit");
    editBtn.innerHTML = "EDIT";
    btnSection.appendChild(editBtn);
  
    //DELETE BUTTON
    const deleteBtn = document.createElement("button");
    deleteBtn.classList.add("delete__btn");
    deleteBtn.classList.add(`js-delete`);
    deleteBtn.innerHTML = "DELETE";
    btnSection.appendChild(deleteBtn);
    });

}

axios.get<Card[]>('http://localhost:3004/cards').then(({ data }) => {
  getData(data)

})


let deleteButtons = document.querySelectorAll<HTMLButtonElement>(`.js-delete`)
let editButtons = document.querySelectorAll<HTMLButtonElement>('.js-edit')
let cards = document.querySelectorAll('.js-card')
const addTitle = document.querySelector('.js-add-title') as HTMLInputElement
const addText = document.querySelector('.js-add-text') as HTMLInputElement
const addBtn = document.querySelector('.js-add-btn')

for (let i = 0; i < deleteButtons.length; i++) {
  deleteButtons[i].addEventListener('click', () => {
    axios.delete<Card[]>(`http://localhost:3004/cards/${i +1}`).then(({ data }) => {
      getData(data)
    });
  });
}



//ADD NEW
addBtn?.addEventListener('click', () => {
  axios.post<Card[]>('http://localhost:3004/cards', {
    title: addTitle.value,
    text: addText.value,
    image: "https://picsum.photos/200",
  }).then(({ data }) => {
     getData(data)
  });
});

HTML

<body>
    <section class="main__section">
        <div class="main__wrapper js-main-wrapper">
        </div>
    </section>
    <section class="input__section">
        <div class="input__wrapper">
            <span>Add new</span>
            <hr>
            <form class="form">
                <label> Title
                    <br>
                    <input type="text" class="input__title js-add-title" required>
                    <br>
                    Text
                    <br>
                    <textarea cols="30" rows="10" class="js-add-text"></textarea>
                    <br>
                    <button class="add__button js-add-btn">Add</button> 
                </label>
            </form>

        </div>
    </section>
    <script src="/scripts.js"></script>
</body>

数据库.json

{
  "cards": [
    {
      "id": 1,
      "title": "Title 1",
      "image": "https://picsum.photos/200",
      "text": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic"
    },
    {
      "id": 2,
      "title": "Title 2",
      "image": "https://picsum.photos/200",
      "text": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic"
    },
    {
      "id": 3,
      "title": "Title 3",
      "image": "https://picsum.photos/200",
      "text": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic"
    },
    {
      "id": 4,
      "title": "Title 4",
      "image": "https://picsum.photos/200",
      "text": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic"
    },
    {
      "title": "wrwrwrwr",
      "text": "rwrwrwr",
      "image": "https://picsum.photos/200",
      "id": 5
    },
    {
      "title": "",
      "text": "",
      "image": "https://picsum.photos/200",
      "id": 6
    }
  ]
}

这是特别的点击事件监听器：

for (let i = 0; i < deleteButtons.length; i++) {
  deleteButtons[i].addEventListener('click', () => {
    axios.delete<Card[]>(`http://localhost:3004/cards/${i +1}`).then(({ data }) => {
      getData(data)
    });
  });
}

Answer 1

您是否测试过 API 端点？ 我认为这可能是问题所在。 我通过调用“https://jsonplaceholder.typicode.com/users”将你的 API 调用切换到本地主机，并且你创建卡片 UI 的代码工作得很好。

axios.get("https://jsonplaceholder.typicode.com/users").then(({ data }) => {
  getData(data);
});

另外，我不得不修改类型：

type Card = {
  id: string;
  name: string;
  username: string;
  email: string;
};

希望这可以帮助。

如何从 db.json 中删除动态创建的元素

问题描述

1 个解决方案

解决方案1
0 2023-01-23 05:34:28

如何从 db.json 中删除动态创建的元素

问题描述

1 个解决方案

解决方案1 0 2023-01-23 05:34:28

解决方案1
0 2023-01-23 05:34:28