Question

我正在做＆＃34; odin project＆＃34;的图书馆项目。网站，我无法完成它。我的想法是访问＆＃34;库中的卡特定索引＆＃34;对象数组，但我这样做有困难。我的想法是有一个函数，从数组中的位置创建某种类型的id（例如它的索引），并使用它作为我的删除按钮的访问。有什么建议？我感谢您在这里的时间是codepen link

    //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中删除元素，第二行创建没有删除条目的新库数组。

＆＃13;

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]);
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

我删除了这一行

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

您不再需要它，因为我已为该按钮添加了event listener，并且由于您未在代码中定义remove函数而导致错误。< / p>

从对象数组中删除元素onClick

1 个答案: