javascript - display checkbox input as text in a row created with JS, and delete that row

Question

I have two problems with my vanilla JS exercise. I looked around the web and tried different code for two days now, and i'm honestly at a loss.

First, i have the checkbox input, where the user checks/unchecks a field. What i want is to have it written "yes" or "no" in a specific row field on webpage. The row gets created, but no matter what i try, it always writes "true/false" instead of what i want.

Input:

<label id="readlabel" for="read">Have you consumed the knowledge inside?</label><br>
<input type="checkbox" id="read" name="read">

checkbox gets created and appended to the table (id=myForm, table, tbody) solely with JS.

    let book = {
    ...
    read:document.getElementById("read").checked,
    }

    books.map((book) => {
    ...
    let td5 = document.createElement("td");
    td5.classList.add("checkTd");
    td5.innerHTML = book.read;
    row.appendChild(td5);
    tbody.appendChild(row);
    }

and the whole thing gets saved to local storage:

var existingBooks = JSON.parse(localStorage.getItem("BookList"));
if(existingBooks == null) existingBooks = [];
existingBooks.push(book);
localStorage.setItem("BookList", JSON.stringify(existingBooks));
books.splice(0,1);

---

Next up, there is the problem of deleting table rows. Button gets created and appended with JS:

    books.map((book) => {
    ...
    var td6 = document.createElement("button");
    td6.innerHTML = "Delete";
    td6.classList.add("deleteBtn");
    row.appendChild(td6);
    tbody.appendChild(row);
    }

This button should delete the row of six cells on which the button is on. Again been trying different code for days with not a single one working. I hope the amount of code i pasted is enough.

Oh, and the code is organized as:

let books = []

const addBook =(ev)=> {
    let book = {...}
    books.push(book);
    books.map((book) => {
        "create and append"
    })
save to storage
}

question from:https://stackoverflow.com/questions/65641613/display-checkbox-input-as-text-in-a-row-created-with-js-and-delete-that-row

Answer 1

To delete row removeChild() DOM method can be used like this: elementToDelete.parentNode.removeChild(elementToDelete).

The only challenge it to navigate from Delete button node (event.currentTarget in event handler) to the row node that needs deleting (in a reliable way).

There is already a row variable so it can be used instead. Function arguments can be pre-filled with .bind() method, so current value of row can be passed to click handler.

Add click event handler to Delete buttons:

// the arguments get pre-filled using bind(null, row)
//     this will be `null`
//     row will be set
// event is automatically added by DOM when buttons
// are clicked and this function gets called
function deleteBtnHandler(row, event) {
  event.preventDefault();
  event.stopPropagation();

  const elementToDelete = row;
  // alternatively
  // event.currentTarget (which is a Delete button)
  // can be used to find a node to delete
  // (add extra '.parentNode' to reach the needed element,
  //  needs to be updated when HTML tree structure changes)
  // const elementToDelete = event.currentTarget.parentNode;

  elementToDelete.parentNode.removeChild(elementToDelete);
}
...

    var td6 = document.createElement("button");
    td6.innerHTML = "Delete";
    td6.classList.add("deleteBtn");
    td6.addEventListener('click', deleteBtnHandler.bind(null, row));
    row.appendChild(td6);
    tbody.appendChild(row);