[FIXED] How to add a delete button for newly displayed objects in an array

Issue

i have a simple library app. i have an array that contains all my "book" objects and will also have functionality to add more objects to the array which will then be displayed as table rows. I need a delete function that targets the rows the the table but also newly created rows.

function Book(name, author, ReadOrNot) {
    this.name = name
    this.author = author
    this.ReadOrNot = ReadOrNot
}

const book1 = new Book("The Hobbit", "J.R.R Tolkien", "Read")
const book2 = new Book("A Game of Thrones", "George R.R. Martin", "Not read")
const book3 = new Book("Jane Eyre", "Charlotte Brontë", "Read")

let myLibrary = []

function addBookToLibrary(...arr) {
 myLibrary.push(...arr)
}

addBookToLibrary(book1)
addBookToLibrary(book2)
addBookToLibrary(book3)


function addBookToTable(){
    let tbody = document.querySelector('tbody')
    myLibrary.forEach(b =>{
      let tr = document.createElement('tr')
      let content = '<td>' + b.name + '</td><td>' + b.author + '</td>'
      if(b.ReadOrNot == 'Read'){
        content += '<td><button id="readbtn" class="btn rdbtn">Read</button></td>'  
       }
       else if(b.ReadOrNot == 'Not read'){
         content += '<td><button id="readbtn" class="btn rdbtn">Not read</button></td>'
       }
       content += '<td><button class="btn delbtn" onclick="toggleDelete()">Delete</button></td>'
      tr.innerHTML = content
      tbody.appendChild(tr)
     })
  }
  
  addBookToTable()

<table>
        <thead>
            <tr>
                <td>Name</td>
                <td>Author</td>
                <td>Status</td>
                <td>      </td>
            </tr>
        </thead>
       
        <tbody>
            
        </tbody>
    </table>

Solution

Following a simple approach and just defining your already declared toggleDelete() function.

1. Remove a row

function Book(name, author, ReadOrNot) {
  this.name = name
  this.author = author
  this.ReadOrNot = ReadOrNot
}

const book1 = new Book("The Hobbit", "J.R.R Tolkien", "Read")
const book2 = new Book("A Game of Thrones", "George R.R. Martin", "Not read")
const book3 = new Book("Jane Eyre", "Charlotte Brontë", "Read")

let myLibrary = []

function addBookToLibrary(...arr) {
  myLibrary.push(...arr)
}

addBookToLibrary(book1)
addBookToLibrary(book2)
addBookToLibrary(book3)


function addBookToTable() {
  let tbody = document.querySelector('tbody')
  myLibrary.forEach(b => {
    let tr = document.createElement('tr')
    let content = '<td>' + b.name + '</td><td>' + b.author + '</td>'
    if (b.ReadOrNot == 'Read') {
      content += '<td><button id="readbtn" class="btn rdbtn">Read</button></td>'
    } else if (b.ReadOrNot == 'Not read') {
      content += '<td><button id="readbtn" class="btn rdbtn">Not read</button></td>'
    }
    content += '<td><button class="btn delbtn" onclick="toggleDelete(this)">Delete</button></td>'
    tr.innerHTML = content
    tbody.appendChild(tr)
  })
}
addBookToTable()

function toggleDelete(o) {
  var p = o.parentNode.parentNode;
  p.parentNode.removeChild(p);
}

.hide-row {
  visibility: hidden;
}

<table>
  <thead>
    <tr>
      <td>Name</td>
      <td>Author</td>
      <td>Status</td>
      <td> </td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

2. Hide/Show a row

function Book(name, author, ReadOrNot) {
  this.name = name
  this.author = author
  this.ReadOrNot = ReadOrNot
}

const book1 = new Book("The Hobbit", "J.R.R Tolkien", "Read")
const book2 = new Book("A Game of Thrones", "George R.R. Martin", "Not read")
const book3 = new Book("Jane Eyre", "Charlotte Brontë", "Read")

let myLibrary = []

function addBookToLibrary(...arr) {
  myLibrary.push(...arr)
}

addBookToLibrary(book1)
addBookToLibrary(book2)
addBookToLibrary(book3)


function addBookToTable() {
  let tbody = document.querySelector('tbody')
  myLibrary.forEach(b => {
    let tr = document.createElement('tr')
    let content = '<td>' + b.name + '</td><td>' + b.author + '</td>'
    if (b.ReadOrNot == 'Read') {
      content += '<td><button id="readbtn" class="btn rdbtn">Read</button></td>'
    } else if (b.ReadOrNot == 'Not read') {
      content += '<td><button id="readbtn" class="btn rdbtn">Not read</button></td>'
    }
    content += '<td><button class="btn delbtn" onclick="toggleDelete(this)">Hide</button></td>'
    tr.innerHTML = content
    tbody.appendChild(tr)
  })
}
addBookToTable()

function toggleDelete(o) {
  var p = o.parentNode.parentNode;
  p.childNodes.forEach(elements => {
    elements.classList.toggle('hide-row');
  })
  p.childNodes[3].style = 'visibility : visible !important';
  if (p.childNodes[3].childNodes[0].parentNode.classList[0] == "hide-row") {
    p.childNodes[3].childNodes[0].innerHTML = 'Show';
  } else {
    p.childNodes[3].childNodes[0].innerHTML = 'Hide';
  }
}

.hide-row {
  visibility: hidden;
}

<table>
  <thead>
    <tr>
      <td>Name</td>
      <td>Author</td>
      <td>Status</td>
      <td> </td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answered By - first

Answer Checked By - Marilyn (PHPFixing Volunteer)