Library App Project

Hi there!

I’m building a Library App project from The Odin Project. The app basically consists of an interface where users can enter books by title, author, pages and whether the book has been read and the app will display a list of the books with all this info.

I’m stuck on a step that’s asking me to add a delete button next to each book that will delete a given book entered. I was able to write the code that will show the remove button next to the book. However, I don’t know how to write the code that will remove the book from both the interface and the array where all book objects are stored.

The instructions hint at using data-attributes. I’ve tried reading articles about data-attributes but I don’t understand how I can use them in this project.

Can someone help or point me in the right direction?

Here’s the link to the project: GitHub - Afer1991/library-app

Thanks in advance.

  • Give each book an id (in the data structure) and add that id to the parent DOM element containing the book data (you can use a dataset attribute or just an id).

  • Inside the button click handler identify the book id (parentElement, closest(), etc. properties depending on the DOM structure and how you need to traverse it).

  • After you get the book id from the DOM, filter your data structure of books using that id and remove the book.

  • Re-render the books data structure.

Thank you for the insight @lasjorg . I understand what you are telling me to do but I’m still having difficulties translating it into code. I figured out how to give each book an id and add the parent element a data-attribute (In this case the td element). But I’m having problems with the next step:

  • Inside the button click handler identify the book id (parentElement, closest(), etc. properties depending on the DOM structure and how you need to traverse it).

Can you elaborate more on this please?

Getting the id is implementation specific.

If you use an inline handler and pass it this your handler function can access the click target (itself) using a parameter and get the parent dataset using parentElement.

<div data-id="1">
  <p>text</p>
  <button onclick="deleteItem(this)">Delete</button>
</div>
function deleteItem(btn) {
  const parentID = btn.parentElement.dataset.id;
  console.log(parentID) // "1"
}

Using an inline handler is a bit easier when dealing with a dynamically updated list.

Then filter the data using the id and re-render it.

1 Like

I was able to figure it out, I had to marinate on the concepts you mentioned for a while until it clicked. Thanks again! I was about to give up on this project but you dug me out of a hole.