Przycisk błędnie usuwa obiekty z tablicy obiektów.

Question

Witam serdecznie, tworzę prostą apkę biblioteczną. Mam tablicę która zawiera obiekty(książki) każda z nich posiada swoje klucze.

Całość uruchamiana jest przyciskiem który ma wyświetlić bibliotekę.

Po wciśnięciu guzika ten tworzy diva każdemu z obiektów, zawartość kluczy wstawia jako paragrafy i tworzy 2 przyciski jeden do usuwania książki i drugi do edycji jednego z kluczy. 

Przycisk usuwający błędnie usuwa obiekty z tablicy.

każda z książek ma swoje id i to id odpowiada numerowi w tablicy. Przycisk próbuje usuwać za pomocą .splice() gdzie numerem początkowym jest id książki.

Czy ktoś jest w stanie mi powiedzieć dlaczego przycisk błędnie usuwa obiekty z tablicy?

let myLibrary = [];    //pusta tablica
new Book(title.value, author.value, pagesNumber.value, alreadyRead) // konstruktor którym tworzone są obiekty (książki)

//funkcja wywołania biblioteki:

libraryButton.addEventListener('click', () => {
    if (myLibrary[0] === undefined) {
        alert("No books in library yet, please add books")
    }else {
        const bookCardsDiv = document.querySelector('.cardsSpace');

        if(clickCounter === 0) {
            myLibrary.forEach((book, i) => {
                const div = document.createElement('div');
                div.classList.add('book-card');
                div.innerHTML = '<p>' + `Title: ${book.title}` + '</p>' + '<p>' + `Author: ${book.author}` + '</p>' + '<p>' + `Number of Pages: ${book.pagesNumber}` + '</p>' + '<p>' + `Already Read: ${book.alreadyRead}` + '</p>';
                bookCardsDiv.appendChild(div);
                book["id"] = i;
                const divBookCard = document.querySelectorAll('.book-card');
                console.log(divBookCard);
                for (let j = 0; j < 2; j++) {
                    if(j === 0){
                        const cardButton = document.createElement('button');
                        cardButton.classList.add(`cardButton${j}`);
                        cardButton.innerHTML = `Delete book`;
                        divBookCard[i].appendChild(cardButton);
                    }else {
                        const cardButton = document.createElement('button');
                        cardButton.classList.add(`cardButton${j}`);
                        cardButton.setAttribute("id", `S${book.id}`);
                        cardButton.innerHTML = `Switch read status`;
                        divBookCard[i].appendChild(cardButton);
                    }
                }
                const buttonDeleteBook = document.querySelectorAll(".cardButton0")
                buttonDeleteBook.forEach((button) => {
                    button.addEventListener("click", () => {
                    myLibrary.splice(book.id, 1);
                    })
                })
            })
            clickCounter += 1;
        }
        
        else {
            removeAllChildNodes(bookCardsDiv);
            myLibrary.forEach((book, i) => {
                const div = document.createElement('div');
                div.classList.add('book-card');
                div.innerHTML = '<p>' + `Title: ${book.title}` + '</p>' + '<p>' + `Author: ${book.author}` + '</p>' + '<p>' + `Number of Pages: ${book.pagesNumber}` + '</p>' + '<p>' + `Already Read: ${book.alreadyRead}` + '</p>';
                bookCardsDiv.appendChild(div);
                book["id"] = i;
                const divBookCard = document.querySelectorAll('.book-card');
                for (let j = 0; j < 2; j++) {
                    if(j === 0){
                        const cardButton = document.createElement('button');
                        cardButton.classList.add(`cardButton${j}`);
                        cardButton.innerHTML = `Delete book`;
                        divBookCard[i].appendChild(cardButton);
                    }else {
                        const cardButton = document.createElement('button');
                        cardButton.classList.add(`cardButton${j}`);
                        cardButton.innerHTML = `Switch read status`;
                        divBookCard[i].appendChild(cardButton);
                    }
                }
                const buttonDeleteBook = document.querySelectorAll(".cardButton0")
                buttonDeleteBook.forEach((button) => {
                    button.addEventListener("click", () => {
                    myLibrary.splice(book.id, 1);
                    })
                })
            })
        }
    }
})

 

Comments

Już wiem, gdy usuwam element z tablicy to reszt el zmienia swój nr w tablicy ale id zostaje dlatego później id wskazuje bledną pozycje w tablicy.

---

@castor_fiber, Wybacz ale nie rozumiem co robi linijka: 'new Book(title.value, author.value, pagesNumber.value, alreadyRead) // konstruktor którym tworzone są obiekty (książki)'. Nie przypisujesz nowo utworzonego obiektu do żadnej zmiennej to po co go w ogóle tworzysz?

Domyślam się że miało być:

const book = new Book(title.value, author.value, pagesNumber.value, alreadyRead) // konstruktor którym tworzone są obiekty (książki)

 

Answer 1

Może nie usuwaj poprzez indeks z tablicy tylko według klucza poprzez użycie np. metody filter.

 

przykład

<div class="container">
  <table id="library_view">
    <thead>
      <tr>
        <th>Autor</th>
        <th>Tytuł</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
      <tr>
        <td>
          <input type="text" id="author" />
        </td>
        <td>
          <input type="text" id="title" />
        </td>
        <td>
          <button id="add_book">Dodaj</button>            
        </td>
      </tr>
    </tfoot>
  </table>
  
  <template id="button_delete_book">
    <button id="delete_book" data-id-book="{{id_book}}">Usuń</button>
  </template>    
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
}
.container {
  width: 60vw;
  margin: 1em 0 0 1em;
}
table {
  width: 100%;
  font: 400 1em/1.4 monospace;
  cursor: default;
  text-align: center;
}
thead tr,
tfoot tr {  
  background-color: black;
  color: white;
  text-align: center;
}
thead th:last-child {
  width: 10%;
}
tbody tr:nth-child(odd) {
  background-color: rgba(224,224,235,1);
}
tbody tr:nth-child(even) {
  background-color: rgba(208,208,225,1);
}
tbody tr:hover {
  background-color: rgba(177,177,205,1);
}
tfoot {
  height: 2.4em;
}
tfoot td input, button {
  font: 400 1em/1.3 monospace;
  margin: 0.1em;
}
tfoot td input {
  width: 95%;
  border-color: white;
  color: white;
  background-color: inherit;
}
tfoot td button {
  width: 80%;
}

var library = [
  { id:'1643443965743', author:'Jerzy Grębosz', title:'Opus magnum C++11' },
  { id:'1643443973239', author:'Eric Freeman, Elisabeth Robson', title:'HTML5. Rusz głową!' },
  { id:'1643444350334', author:'Lea Verou', title:'CSS bez tajemnic' },
  { id:'1643444389965', author:'Tomasz Sochacki', title:'JavaScript. Techniki zaawansowane' },
  { id:'1643495253129', author:'Lynn Beighley', title:'SQL. Rusz głową!' }
];

let table_content, add_book_button,
    template_button_delete;
window.addEventListener('load', load);

function load() {
  table_content   = document.querySelector('#library_view tbody');
  add_book_button = document.querySelector('#add_book');
  template_button_delete = document.querySelector('template#button_delete_book');

  add_book_button.addEventListener('click', addBook);
  table_content.addEventListener('click', actionForButtons);
  showInTableContent();
}

function addBook() {
  const author = document.querySelector('input#author').value.trim(),
        title  = document.querySelector('input#title').value.trim();        

  if (author && title) {
    library.push( { id:GenerateID(), author:author, title:title } );
    addToTableContent(library[library.length - 1]);
  }
}

function actionForButtons(e) {
  if (e.target.nodeName == 'BUTTON') {
    if (e.target.id == 'delete_book') {
      deleteBook(e.target.dataset.idBook);
      removeFromTableContent(e.target.closest('tr'));
    }
    /*
    if (e.target.id == 'edit_book') {
      . . .
    }
    itp.
    */  
  }
}

function deleteBook(id) {
  library = library.filter((row) => row.id !== id);
}

function removeFromTableContent(row) {
  table_content.removeChild(row);
}

function showInTableContent() {
  for (let row of library)
    addToTableContent(row);
}

function addToTableContent(row) {
  const button = (template_button_delete.innerHTML).replace('{{id_book}}', row.id);
  const tr = document.createElement("tr");
  tr.innerHTML = `<td>${row.author}</td><td>${row.title}</td><td>${button}</td>`;
  table_content.appendChild(tr);
}

function GenerateID() {
  return (+new Date()).toString();
}