图书列表表格优化：仅删除最后一行时隐藏表格的JS解决方案

Got it, let's adjust that table behavior so it only hides when you remove the final row—instead of vanishing every time you delete any entry. Here's the breakdown of the changes and the updated code:

Key Issues in Original Code #

1. Duplicate Event Listeners: You had two identical click listeners on the table, which is unnecessary—we'll keep just one.
2. Overly Broad Table Hiding: The original code hid the table immediately after any row deletion, regardless of remaining rows. We need to add a check for leftover rows first.

Updated JavaScript Code #

class Library { 
  constructor(par1, par2, par3){ 
    this.serialNumber = par1; 
    this.bookTitle = par2; 
    this.author = par3; 
  } 
}

class Book {
  addBookToBookList(par4){ 
    const table = document.getElementById('subContainer'), 
          tbody = document.getElementById('tbody'), 
          subContainer = document.getElementById('subContainer'), 
          clearAll = document.getElementById('clear'); 
    
    let tr = document.createElement('tr'); 
    tr.classList = 'listItem'; 
    tr.innerHTML = `<td class="underListItem" id="data1">${par4.serialNumber}</td> 
                    <td class="underListItem" id="data2">${par4.bookTitle}</td> 
                    <td class="underListItem" id="data3">${par4.author}<a href="#"><i class="fa fa-times-circle"></i></a></td>`; 
    
    subContainer.style.display = 'table'; 
    tbody.appendChild(tr); 
    clearAll.style.display = 'block'; 
  }

  clearInputFields(){ 
    document.getElementById('bookTitle').value =''; 
    document.getElementById('author').value =''; 
    document.getElementById('serialNum').value =''; 
  }

  message(msg, color){ 
    let header = document.getElementById('header'), 
        p = document.createElement('p'); 
    p.classList = 'p'; 
    header.insertAdjacentElement('afterend', p); 
    p.style.display = 'block'; 
    p.innerText = msg; 
    p.style.backgroundColor = color; 
    setTimeout(()=>{ 
      p.style.display = 'none'; 
    }, 1500) 
  }
}

// Form submission handler (unchanged)
document.getElementById('form').addEventListener('submit', function(e){ 
  const bookTitle = document.getElementById('bookTitle').value; 
  const author = document.getElementById('author').value; 
  const serialNum = document.getElementById('serialNum').value; 
  let book = new Library(serialNum, bookTitle, author); 
  let addBook = new Book(); 

  if(bookTitle === ''){ 
    addBook.message('Please provide Book Title!!', 'rgb(243, 93, 93)'); 
  }else if(author === ''){ 
    addBook.message('Please provide Author!!', 'rgb(243, 93, 93)'); 
  }else if(serialNum === ''){ 
    addBook.message('Please provide Serial Number!!', 'rgb(243, 93, 93)') 
  }else if(bookTitle !== '' && author !== '' && serialNum !== ''){ 
    addBook.addBookToBookList(book); 
    addBook.message('New Book Added!!', 'rgb(46, 216, 69)'); 
    addBook.clearInputFields(); 
  } 
  e.preventDefault() 
})

// Updated row deletion handler
document.getElementById('subContainer').addEventListener('click', function(e){ 
  if(e.target.classList.contains('fa-times-circle')){
    // Use closest() to safely get the parent row (cleaner than multiple parentElement calls)
    const rowToRemove = e.target.closest('.listItem');
    rowToRemove.remove();

    // Check how many rows are left in tbody
    const tbody = document.getElementById('tbody');
    const remainingRows = tbody.querySelectorAll('.listItem').length;

    const table = document.getElementById('subContainer');
    const clearButton = document.getElementById('clear');

    // Only hide table and clear button if no rows remain
    if(remainingRows === 0){
      table.style.display = 'none';
      clearButton.style.display = 'none';
    }
  }
})

What Changed? #

• Removed Duplicate Listener: We deleted the second identical click listener on subContainer to avoid redundant code.
• Safer Row Selection: Used e.target.closest('.listItem') to find the row to delete—this is more robust than chaining parentElement multiple times, and works even if the DOM structure shifts slightly.
• Row Count Check: After deleting a row, we count how many .listItem rows are left in the tbody. Only when this count hits 0 do we hide the table and the clear button.

This way, the table stays visible as long as there's at least one book entry, and only disappears when you remove the last one.

内容的提问来源于stack exchange，提问作者Kanchan Sanyal