JavaScript 阵列在拼接时未正确移除

Question

I am doing a list of input it's working but when I delete the item and submit again it does changes index and add the new items in the wrong position. Here is a live example https://codesandbox.io/s/flamboyant-curie-bb6yn?file=/src/index.js . Let me know if you need any changes and also if I remove images code and test plain text form it still showing same error.

 const Data = [ "https://romeojeremiah.github.io/Filter-Project/img/sweets-1.jpeg", "https://romeojeremiah.github.io/Filter-Project/img/sweets-2.jpeg", "https://romeojeremiah.github.io/Filter-Project/img/sweets-3.jpeg", "https://romeojeremiah.github.io/Filter-Project/img/doughnut-1.jpeg", "https://romeojeremiah.github.io/Filter-Project/img/doughnut-2.jpeg", "https://romeojeremiah.github.io/Filter-Project/img/doughnut-3.jpeg", ]; const submitBtn = document.querySelector(".submitBtn"); let showLists = document.querySelector(".showLists"); let arry = []; let count = 0; submitBtn.addEventListener("click", () => { const name = document.querySelector(".name").value; const course = document.querySelector(".course").value; const author = document.querySelector(".author").value; count++; if (count === 6) { count = 0; } let x = ` <div class="col-sm-4 mb-3"> <img src=${Data[count]} class="img-fluid" /> <h4>Name: ${name} </h4> <h4>Course: ${course}</h4> <h4>Author: ${author}</h4> <button type="submit" class="btn btn-primary deleteBtn"> Delete </button> </div> `; arry.push(x); showLists.innerHTML = arry.join(" "); deleteBtn(); }); const deleteBtn = () => { const deleteBtn = document.querySelectorAll(".deleteBtn"); deleteBtn.forEach((item, index) => { item.addEventListener("click", (e) => { arry.splice(index, 1); e.target.parentElement.remove(); }); }); };

 <div class="row no-gutters"> <div class="container"> <div class="col-sm-12 mt-3"> <input type="text" id="myInput" class="form-control name" placeholder="Name" title="Type in a name" /> <input type="text" id="myInput" class="form-control my-3 course" placeholder="Course" title="Type in a name" /> <input type="text" id="myInput" class="form-control author" placeholder="Author" title="Type in a name" /> <div class="my-3"> <button class="btn btn-secondary submitBtn">SUBMIT</button> </div> <div class="showLists row"></div> </div> </div>

Answer 1

I removed arry variable because I don't see point of keeping this variable. With innerHtml you redefine whole content of container .showLists , so you must apply listeners again to all buttons. This is not optimal solution. You should consider replacing it for example appendChild .

const Data = [
  "https://romeojeremiah.github.io/Filter-Project/img/sweets-1.jpeg",
  "https://romeojeremiah.github.io/Filter-Project/img/sweets-2.jpeg",
  "https://romeojeremiah.github.io/Filter-Project/img/sweets-3.jpeg",
  "https://romeojeremiah.github.io/Filter-Project/img/doughnut-1.jpeg",
  "https://romeojeremiah.github.io/Filter-Project/img/doughnut-2.jpeg",
  "https://romeojeremiah.github.io/Filter-Project/img/doughnut-3.jpeg"
];

const submitBtn = document.querySelector(".submitBtn");
let showLists = document.querySelector(".showLists");
let count = 0;

submitBtn.addEventListener("click", () => {
  const name = document.querySelector(".name").value;
  const course = document.querySelector(".course").value;
  const author = document.querySelector(".author").value;
  count++;
  if (count === 6) {
    count = 0;
  }

  let x = `
  <div class="col-sm-4 mb-3">
        <img
          src=${Data[count]}
          class="img-fluid"
        />

          <h4>Name : ${name} </h4>
          <h4>Course : ${course}</h4>
          <h4>Author : ${author}</h4>


        <button type="submit" class="btn btn-primary deleteBtn">
          Delete
        </button>
      </div>

  `;

  showLists.innerHTML += x;
  deleteBtn();
});

let deleteBtn = () => {
  let deleteBtn = document.querySelectorAll(".deleteBtn");
  console.log(deleteBtn);
  console.log(deleteBtn.length-1);
  deleteBtn.forEach((item) => {
    item.addEventListener("click", (e) => {
      e.target.parentElement.remove();
    });
  });
};