Как удалить элемент, созданный динамически - PullRequest
Новая
       4

Как удалить элемент, созданный динамически

1 голос
/ 07 марта 2020

У меня есть список карт, динамически создаваемых с помощью вызова 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, если я создаю много карт, удаление работает только с первой картой. Не могу понять, почему

1 Ответ

1 голос
/ 07 марта 2020

Попробуйте следующий 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();
      });
    });
});
...