javascript - 从对象数组中删除元素 onClick

Question

我正在从“odin project”网站做图书馆项目，但我无法完成它。我的想法是访问“库”对象数组中的卡片特定索引，但我在这样做时遇到了麻烦。我的想法是有一个函数从它在数组中的位置（例如它的索引）创建某种类型的 id 并将其用作我的删除按钮的访问权限。有什么建议么？感谢您的时间，这是我的codepen 链接

    //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; 

标签： javascriptonclick

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在代码中定义函数而引发错误。