Question

我有一个用ajax调用动态创建的卡列表，一旦创建，我想删除其中一张。我该怎么办？

这是我的html

    <ul id="card-trigger">
            <li><a id="uno" href="javascript:void(0)" data-sku="7">post 7</a></li>
            <li><a href="javascript:void(0)" data-sku="3">post 3</a></li>
            <li><a href="javascript:void(0)" data-sku="2">post 2</a></li>
        </ul>

        <a href="javascript:void(0)" id="remover">remove cards</a>

        <div id="cards-holder"></div

这是我的JS。

let parent = document.getElementById("cards-holder");

document.getElementById("card-trigger").addEventListener("click", function(e) {
  let param = e.target.getAttribute("data-sku");
  let url = "https://jsonplaceholder.typicode.com/posts/" + param;
  fetch(url)
    .then(response => {
      if (response.ok) {
        return Promise.resolve(response);
      } else {
        return Promise.reject(new Error("error"));
      }
    })
    .then(response => response.json()) // parse response as JSON
    .then(data => {
      let cardContainer = document.createElement("div");
      cardContainer.classList.add("card");
      parent.append(cardContainer);
      let cardBody = document.createElement("div");
      cardBody.classList.add("card-body");
      cardContainer.append(cardBody);
      let cardTitle = document.createElement("h5");
      cardTitle.classList.add("card-title");
      cardBody.append(cardTitle);
      let cardText = document.createElement("p");
      cardText.classList.add("card-text");
      cardBody.append(cardText);
      let buttonDelete = document.createElement("button");
      buttonDelete.innerHTML = "Delete";
      buttonDelete.classList.add("btn-primary");
      buttonDelete.id = "delete";
      cardBody.append(buttonDelete);
      cardTitle.innerHTML += data.title;
      cardText.innerHTML += data.body;

      document.getElementById("delete").addEventListener("click", function(e) {
        let child = e.target;
        parentDiv = child.parentNode;
        parent2Div = parentDiv.parentNode;
        parent2Div.remove();
      });
    });
});

当我单击删除按钮时，仅在ajax调用后有效，如果我创建许多卡，则删除仅适用于第一张卡。不明白为什么

Answer 1

尝试下面的JS代码。

let parent = document.getElementById("cards-holder");

document.getElementById("card-trigger").addEventListener("click", function(e) {
  let param = e.target.getAttribute("data-sku");
  let url = "https://jsonplaceholder.typicode.com/posts/" + param;
  fetch(url)
    .then(response => {
      if (response.ok) {
        return Promise.resolve(response);
      } else {
        return Promise.reject(new Error("error"));
      }
    })
    .then(response => response.json()) // parse response as JSON
    .then(data => {
      let cardContainer = document.createElement("div");
      cardContainer.classList.add("card");
      parent.append(cardContainer);
      let cardBody = document.createElement("div");
      cardBody.classList.add("card-body");
      cardContainer.append(cardBody);
      let cardTitle = document.createElement("h5");
      cardTitle.classList.add("card-title");
      cardBody.append(cardTitle);
      let cardText = document.createElement("p");
      cardText.classList.add("card-text");
      cardBody.append(cardText);
      let buttonDelete = document.createElement("button");
      buttonDelete.innerHTML = "Delete";
      buttonDelete.classList.add("btn-primary");
      buttonDelete.id = "delete";
      cardBody.append(buttonDelete);
      cardTitle.innerHTML += data.title;
      cardText.innerHTML += data.body;

      buttonDelete.addEventListener("click", function(e) {
        cardContainer.remove();
      });
    });
});

如何删除动态创建的项目

1 个答案: