JavaScript: Create a delete and status button dynamically

Question

I'm currently working on building a Library app. I am attempting to dynamically create rows of book info using an object array. I am having trouble creating a delete button for each row that will remove all the contents in that row as well as a checkmark button for each row indicating that book has been read.

<div class = "container">
    <div class = "header">

    </div>

    <div class = "books">
        <div class = "book">
            <form id = "Form" onsubmit = "event.preventDefault();">
                <label for = "fname">First Name:</label>
                <input type = "text" id = "fname" name = "fname">
                <label for = "lname">Last Name:</label>
                <input type = "text" id = "lname" name = "lname">
                <label for = "title">Title:</label>
                <input type = "text" id = "title" name = "title">
                <label for = "pages">Pages:</label>
                <input type = "number" id = "pages" name = "pages">
                <label for = "read">Read</label>
                <input type = "checkbox" id = "read" name = "read" value = "Read">

                <button class = "addBook" onclick = "addBookToLibrary(); clearInput()">Add Book</button>
            </form>
        </div>
    </div>

    <div id = "bookInfo">
        <div id = "firstName"></div>
        <div id = "lastName"></div>
        <div id = "bookTitle"></div>
        <div id = "pageNum"></div>
        <button id = "delete"></button>
    </div>

</div>

---

let myLibrary = [];
function Book(firstName, lastName, title, pages, read) 
{
    this.firstName = firstName
    this.lastName = lastName
    this.title = title
    this.pages = pages
    this.read = read
}

function addBookToLibrary() 
{
    var firstName = document.getElementById("fname").value;
    var secondName = document.getElementById("lname").value;
    var title = document.getElementById("title").value;
    var pages = document.getElementById("pages").value;
    var read = document.getElementById("read").value;
    const book = new Book(firstName, secondName, title, pages, read);
    myLibrary.push(book);
    console.log(myLibrary);
    displayBooks();
}


function displayBooks()
{
    let name1 = " ";
    let name2 = " ";
    let bookT = " ";
    let numPages = " ";
    
    for (i = 0; i < myLibrary.length; i++)
    {
        // bookDesc += myLibrary[i].firstName + " " + myLibrary[i].lastName + " " + myLibrary[i].title + " " + myLibrary[i].pages + '<br/>';
        // document.getElementById("bookInfo").innerHTML = bookDesc;
        name1 += myLibrary[i].firstName + '<br/>';
        document.getElementById("firstName").innerHTML = name1;
        name2 += myLibrary[i].lastName + '<br/>';
        document.getElementById("lastName").innerHTML = name2;
        bookT += myLibrary[i].title + '<br/>';
        document.getElementById("bookTitle").innerHTML = bookT;
        numPages += myLibrary[i].pages + '<br/>';
        document.getElementById("pageNum").innerHTML = numPages;
    }
}

I was originally planning to see if I can store the status button as another object into the array. That way, I can display the name, title, pages, and read status in one row.

Answer 1

I mean this is what you want:

Html

<div class = "container">
    <div class = "header">

    </div>

    <div class = "books">
        <div class = "book">
            <form id = "Form" onsubmit = "event.preventDefault();">
                <label for = "fname">First Name:</label>
                <input type = "text" id = "fname" name = "fname">
                <label for = "lname">Last Name:</label>
                <input type = "text" id = "lname" name = "lname">
                <label for = "title">Title:</label>
                <input type = "text" id = "title" name = "title">
                <label for = "pages">Pages:</label>
                <input type = "number" id = "pages" name = "pages">
                <label for = "read">Read</label>
                <input type = "checkbox" id ="read" name = "read">
                <button class = "addBook" onclick = "addBookToLibrary(); clearInput()">Add Book</button>
            </form>
        </div>
    </div>
  
</div>

Js:

let myLibrary = [];

const bookElements = ["firstname","lastname","title","pages","read"]
const formElements = ["fname","lname","title","pages","read"]

function Book(id,firstName, lastName, title, pages, read) 
{
    this.firstName = firstName
    this.lastName = lastName
    this.title = title
    this.pages = pages
    this.read = read
}

function addBookToLibrary() 
{
    var firstName = document.getElementById("fname").value;
    var secondName = document.getElementById("lname").value;
    var title = document.getElementById("title").value;
    var pages = document.getElementById("pages").value;
    var read = document.getElementById("read").checked;
    const book = new Book(firstName, secondName, title, pages, read);
    myLibrary.push(book)
    console.log(myLibrary)
    addBook();
}


function addBook(event)
{
console.log(event)
    let newContainer = document.createElement("div");
    let containerText = document.createTextNode("book" + myLibrary.length);
    newContainer.appendChild(containerText);
    bookElements.forEach((i,index) => {
    let element = document.createElement("div");
    let formElement = formElements[index];
    let text = formElement != "read"
    ? document.createTextNode(document.getElementById(formElement).value)
    : document.createTextNode(document.getElementById(formElement).checked == true 
        ? "read"
      : "not read");
    element.appendChild(text);
    newContainer.appendChild(element);
    });
    let deleteButton = document.createElement("button");
    let deleteText = document.createTextNode("Delete");
    newContainer.setAttribute("id",`Book${myLibrary.length}`);
    deleteButton.setAttribute("onclick",`DeleteBook(${myLibrary.length})`);
    deleteButton.appendChild(deleteText)
    newContainer.appendChild(deleteButton)
    document.body.appendChild(newContainer)
}

function DeleteBook(id){
    let element = document.getElementById(`Book${id}`)
  element.remove()
}

Hope this help!