How to delete DOM element and related array index at same time?

Question

Edit: Never mind...I give up...I'm done with studying web dev...

I have an array (myLibrary) of "book" objects that are pushed into said array when a user submits input from a form.

let myLibrary = [];

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

function addToLibrary() {
  let Newbook = new Book(
    titleInput.value,
    authorInput.value,
    pagesInput.value,
    readInput.checked
  );

  myLibrary.push(Newbook);
}

Upon submitting, a card is also generated on the DOM displaying the information from the form. I also add a delete button on each dynamically generated card. I am able to delete the card itself using an event listener (in bold), but I am unable to also delete the related object in the array.

function renderBookCard() {
  const newCard = document.createElement("div");
  const removeBook = document.createElement("img");
  const bookTitleDiv = document.createElement("div");
  const titleLabel = document.createElement("p");
  const dynamicTitle = document.createElement("p");
  const authorDiv = document.createElement("div");
  const authorLabel = document.createElement("p");
  const dynamicAuthor = document.createElement("p");
  const pagesDiv = document.createElement("div");
  const pagesLabel = document.createElement("p");
  const dynamicPages = document.createElement("p");
  const readDiv = document.createElement("div");
  const dynamicRead = document.createElement("p");
  //
  MainBookContainer.appendChild(newCard);
  newCard.appendChild(removeBook);
  removeBook.classList.add("trash");
  removeBook.setAttribute(
    "src",
    "./Images/delete_FILL0_wght400_GRAD0_opsz48.svg"
  );
  newCard.classList.add("book-card-container");
  newCard.appendChild(bookTitleDiv);
  bookTitleDiv.classList.add("book-title");
  newCard.appendChild(titleLabel);
  titleLabel.textContent = `Title:`;
  newCard.appendChild(dynamicTitle);
  newCard.appendChild(authorDiv);
  authorDiv.classList.add("book-author");
  newCard.appendChild(authorLabel);
  authorLabel.textContent = `Author:`;
  newCard.appendChild(dynamicAuthor);
  newCard.appendChild(pagesDiv);
  pagesDiv.classList.add("book-pages");
  newCard.appendChild(pagesLabel);
  pagesLabel.textContent = `Pages:`;
  newCard.appendChild(dynamicPages);
  newCard.appendChild(readDiv);
  readDiv.classList.add("book-read");
  newCard.appendChild(dynamicRead);

  //
  let i;
  for (i = 0; i < myLibrary.length; i++) {
    dynamicTitle.textContent = myLibrary[i].title;
    dynamicAuthor.textContent = myLibrary[i].author;
    dynamicPages.textContent = myLibrary[i].pages;
    if (!readInput.checked) {
      dynamicRead.textContent = "Unread";
    } else {
      dynamicRead.textContent = "Read";
    }
  }

  //

  **newCard.addEventListener("click", function (e) {
    if (e.target.classList.contains("trash")) {
      newCard.remove();
      myLibrary.splice([i], 1);**

      
    }
  });
}

How am I able to delete the card and the related object in the array? I hope I was able to ask in a clear way. If not I apologize.

Have a look at @PeterK's answer: web dev can be fun - don't give up too easily! — Carsten Massmann
– Carsten Massmann, Commented Aug 8, 2022 at 5:44

PeterK · Accepted Answer · 2022-08-08 05:27:46Z

Here is my example. I think it might help you.

*If you have many elements to append to your HTML feel free to use insertAdjacentHTML or other methods, this will help you easily to organize your code.

*In my case, I use the filter method to update my list.

let bookList = [];

const addBook = document.querySelector("#add_book");
const bookWrap = document.querySelector("#book_wrap");

addBook.addEventListener("click", () => {
  const bookName = document.querySelector("#book_name");
  const bookAuthor = document.querySelector("#book_author");
  
  bookList.push({
    book_name: bookName.value, 
    book_author: bookAuthor.value
  })
  
  const bookTemplate = `
    <div class="book">
      <div>
         <h2>${bookName.value}</h2> 
         <p>${bookAuthor.value}</p>
      </div>
      <div>
        <button id="trash_${bookName.value}">Trash</button>
      </div>
    </div>`;
    
  bookWrap.insertAdjacentHTML("beforeend", bookTemplate);
  // console.log(bookList)
  
  document.querySelector(`#trash_${bookName.value}`)
    .addEventListener("click", (e) => {
      e.target.closest(".book").remove();
      bookList = [...bookList.filter(item => item.book_name !== e.target.id.split("_")[1])]
      
      // console.log(bookList)
    })
  
  
  
  bookName.value = null;
  bookAuthor.value = null;
})

.book-wrap {
  min-width: 250px;
  min-height: 200px;
  border-radius: 10px;
  border: 1px solid black;
  margin: 20px 0;
  padding: 20px;
}

.book {
  display: flex;
  justify-content: space-between;
  width: 200px;
  gap: 40px;
  margin-bottom: 20px;
}

h2,
p{
  margin: 0;
}

p {
  color: #999;
}

<div>
  <div style="margin-bottom: 10px;">
    <label for="book_name">Book name:</label><br/>
    <input id="book_name" type="text" />
  </div>
  
  <div style="margin-bottom: 10px;">
    <label for="book_author">Author name:</label><br/>
    <input id="book_author" type="text" />
  </div>
  
  <div>
    <button id="add_book">Add Book</button>
  </div>

  <div id="book_wrap" class="book-wrap"></div>
</div>

Hope this might help you.
Enjoy the journey into Web dev.

Collectives™ on Stack Overflow

How to delete DOM element and related array index at same time?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related