How to remove divs with a remove button on them?

I'm trying to create a library app (odin project). I can dinamically create the books(divs) with my code, but I'm struggling to figure out what is the problem with my removing function. I append a picture to show how should this stuff work and I include the code snipet which cause the problem. I would be happy if someone could help me figure it out. Maybe it is trivial and an experienced programmer can easily help me.

//book deleter function

function bookRemove(){
  if (bookIndex>0){
    books = document.querySelectorAll(".book");
    removeButton = document.querySelectorAll(".removeBool");

    for (i=0;i<removeButton.length;i++){
      removeButton[i].addEventListener("click",function(e){
        page.removeChild(books[i-1]);
        bookIndex-=1;
      });
    }
  }
}

//Book adder button listener

bookAddButton.addEventListener("click", function(e){
  bookAppend();
  if (bookIndex>=0){
    bookRemove();
  }
});

And here is the pic with added books (each book has a remove button):