удаление элемента onClick из массива объектов

Question

Я делаю проект библиотеки с веб-сайта "odin project", и у меня возникают проблемы с его завершением.моя идея состоит в том, чтобы получить доступ к определенному индексу карт в массиве объектов "library", но у меня возникают проблемы с этим.моя идея состоит в том, чтобы иметь функцию, которая создает некоторый тип идентификатора из своего места в массиве (например, его индекс), и использовать его в качестве доступа для моей кнопки удаления.какие-либо предложения?я ценю ваше время, вот моя ссылка кодекса

    //constructor to add a book to
function Book(title, author, pages) {
  this.title = title;
  this.author = author;
  this.pages = pages;
}

//array of books
const library = [];



//hides and unhides forms
const hide = () => {
  var form = document.querySelector("#hide");
  if (form.style.display === "none") {
    form.style.cssText =
      "display: block; display: flex; justify-content: center; margin-bottom: 150px";
  } else {
    form.style.display = "none";
  }
};





//creates form, takes input,creates card, resets and runs hide function when done  
const addBookCard = () => {
  const bookName = document.querySelector('input[name="bookName"]').value;
  const authorName = document.querySelector('input[name="authorName"]').value;
  const numPages = document.querySelector('input[name="numPages"]').value;
  library.push(new Book(bookName, authorName, numPages));



  //just stating variables used within my function
  const container = document.querySelector(".flex-row");
  const createCard = document.createElement("div");
  const divTitle = document.createElement("p");
  const divAuthor = document.createElement("p");
  const divPages = document.createElement("p");
  const deleteBtn = document.createElement("button");


  //using a class from my css file
  createCard.classList.add("card");
  createCard.setAttribute("id","id_num")
  deleteBtn.setAttribute("onclick", "remove()")
  deleteBtn.setAttribute('id','delBtn')

  //geting all info from library
  divTitle.textContent = "Title: " + bookName
  divAuthor.textContent = "Author: " + authorName
  divPages.textContent = "Number of Pages: " + numPages
  deleteBtn.textContent = "Delete This Book";

  //adding it all to my html
  container.appendChild(createCard);
  createCard.appendChild(divTitle);
  createCard.appendChild(divAuthor);
  createCard.appendChild(divPages);
  createCard.appendChild(deleteBtn);

  document.getElementById("formReset").reset();
  hide()
  return false
};


var btn = document.querySelector('#newCard');
btn.onclick = addBookCard; 

Answer 1

Вы можете изменить объявление library с const на let.

Затем вы можете объединить книги вместе с соответствующими deleteBtn, таким образом вы сможете легко удалить запись, котораясоответствует нажатой deleteBtn

library.push([new Book(bookName, authorName, numPages), deleteBtn]);

И затем вы можете добавить event listener на deleteBtn следующим образом:

deleteBtn.addEventListener('click', event => {
  event.target.parentNode.remove();
  library = library.filter(v => v[1] !== event.target);
});

Где первая строка удаляет элемент из DOM,а вторая строка создает новый библиотечный массив без удаленной записи.

function Book(title, author, pages) {
  this.title = title;
  this.author = author;
  this.pages = pages;
}

//array of books
let library = [];

//hides and unhides forms
const hide = () => {
  var form = document.querySelector("#hide");
  if (form.style.display === "none") {
    form.style.cssText =
      "display: block; display: flex; justify-content: center; margin-bottom: 150px";
  } else {
    form.style.display = "none";
  }
};



//creates form, takes input,creates card, resets and runs hide function when done
const addBookCard = () => {
  const bookName = document.querySelector('input[name="bookName"]').value;
  const authorName = document.querySelector('input[name="authorName"]').value;
  const numPages = document.querySelector('input[name="numPages"]').value;

  //just stating variables used within my function
  const container = document.querySelector(".flex-row");
  const createCard = document.createElement("div");
  const divTitle = document.createElement("p");
  const divAuthor = document.createElement("p");
  const divPages = document.createElement("p");
  const deleteBtn = document.createElement("button");

  library.push([new Book(bookName, authorName, numPages), deleteBtn]);

  deleteBtn.addEventListener('click', event => {
    event.target.parentNode.remove();
    library = library.filter(v => v[1] !== event.target);
  });

  //using a class from my css file
  createCard.classList.add("card");
  createCard.setAttribute("id","id_num")
  deleteBtn.setAttribute('id','delBtn')

  //geting all info from library
  divTitle.textContent = "Title: " + bookName
  divAuthor.textContent = "Author: " + authorName
  divPages.textContent = "Number of Pages: " + numPages
  deleteBtn.textContent = "Delete This Book";

  //adding it all to my html
  container.appendChild(createCard);
  createCard.appendChild(divTitle);
  createCard.appendChild(divAuthor);
  createCard.appendChild(divPages);
  createCard.appendChild(deleteBtn);

  document.getElementById("formReset").reset();
  hide()
  return false
};


var btn = document.querySelector('#newCard');
btn.onclick = addBookCard;



function hello (){
  for (var i = 0; i < library.length ;i++) {
    console.log(library[i]);
  }
}

body {
  margin: 0 auto;
  width: 960px;
  //background: cyan;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row-form {
  display: flex;
  justify-content: center;
}
.flex-column-form {
  display: flex;
  flex-direction: column;
  background: purple;
  width: 45%;
  padding: 20px;
  border-radius: 5px;
  border: 2px solid black;
  color: white;
  font-weight: 300;
  font-size: 24px;
}

.card {
  width: 33.33%;
  text-align: center;
  height: 200px;
  border: 1px solid black;
  padding: 20px;
  margin: 10px;
  border-radius: 10px;
}

.text {
  padding-bottom: 20px;
  font-weight: 300;
  font-size: 20px;
}

p {
  font-size: 20px;
  font-weight: 400;
}

#newBook {
  margin: 30px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  color: #dff;
  border-radius: 5px;
  background: black;
}

#delBtn{
  padding:10px;
  border-radius:5px;
  background:red;
  color:white;
  font-size:14px;
  cursor: pointer;
}

<div id="display"></div>

<button id="newBook" onclick="hide()">New Book</button>

<div class="flex-row-form" id="hide" style= "display:none">
  <form class="flex-column-form" id="formReset">
    Book Name: <input type="text" name="bookName" value="Book Name" id="title"><br>
    Author Name: <input type="text" name="authorName" value="Author Name " id="author"<br>
    Number of Pages: <input type="text" name="numPages" value="# of Pages" id="pages" ><br>
    <button id="newCard"> Add Book to Library</button>
  </form>
</div>

<div class="flex-row">

</div>

И я удалил эту строку

deleteBtn.setAttribute("onclick", "remove()")

она вам больше не нужна, так как я добавил event listenerдля этой кнопки, и она выдавала ошибку, потому что вы не определили функцию remove в своем коде.