Javascript 获取 table 正文的最后一行并在该行被删除后隐藏 table 的代码

Question

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)
    }
    
}




    




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()
})




document.getElementById('subContainer').addEventListener('click', function(e){
    
    if(e.target.classList.contains('fa-times-circle')){
        e.target.parentElement.parentElement.parentElement.remove();
        document.getElementById('subContainer').style.display = 'none';
    }    
})

document.getElementById('subContainer').addEventListener('click', function(e){
    
    if(e.target.classList.contains('fa-times-circle')){
        e.target.parentElement.parentElement.parentElement.remove();
        document.getElementById('subContainer').style.display = 'none';
    }    
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;900&display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
    <title>Book List</title>
</head>
<body>
    
    <div id="container">        
        
        <table id="subContainer">
            <thead>
                <tr id="list">
                    <th class="listTitle" width="15%">Sl No.</th>
                    <th class="listTitle">Title</th>
                    <th class="listTitle" width="40%">Author</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr class="listItem">
                    <td class="underListItem">Item 1</td>
                    <td class="underListItem">Item 2</td>
                    <td class="underListItem">Item 3<a href="#"><i class="fa fa-times-circle"></i></a></td>
                </tr>
                <tr class="listItem">
                    <td class="underListItem">Item 1</td>
                    <td class="underListItem">Item 2</td>
                    <td class="underListItem">Item 3<a href="#"><i class="fa fa-times-circle"></i></a></td>
                </tr>
                <tr class="listItem">
                    <td class="underListItem">Item 1</td>
                    <td class="underListItem">Item 2</td>
                    <td class="underListItem">Item 3<a href="#"><i class="fa fa-times-circle"></i></a></td>
                </tr>
            </tbody>
        </table>
    </div>    
    
    

    <script src="./app.js"></script>
</body>
</html>

Trying to get the last remaining row of the table body to hide the table once I delete the row. Situation of now is whenever I am deleting a row the whole table gets hidden and reappear if I dynamically add any row. I want its solution in Javascript. Updated the javascript code here..let me know for anything else.

Answer 1

您可以检查 tbody 元素的 rows.length 属性。

注意：我还会使用 closest 找到要删除的 tr 元素。

let table = document.getElementById('subContainer');
document.getElementById('subContainer').addEventListener('click', function(e){
    if(e.target.classList.contains('fa-times-circle')){
        e.target.closest("tr").remove();
        if (table.tBodies[0].rows.length == 0) table.style.display = 'none';
    }    
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;900&display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
    <title>Book List</title>
</head>
<body>
    
    <div id="container">        
        
        <table id="subContainer">
            <thead>
                <tr id="list">
                    <th class="listTitle" width="15%">Sl No.</th>
                    <th class="listTitle">Title</th>
                    <th class="listTitle" width="40%">Author</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr class="listItem">
                    <td class="underListItem">Item 1</td>
                    <td class="underListItem">Item 2</td>
                    <td class="underListItem">Item 3<a href="#"><i class="fa fa-times-circle"></i></a></td>
                </tr>
                <tr class="listItem">
                    <td class="underListItem">Item 1</td>
                    <td class="underListItem">Item 2</td>
                    <td class="underListItem">Item 3<a href="#"><i class="fa fa-times-circle"></i></a></td>
                </tr>
                <tr class="listItem">
                    <td class="underListItem">Item 1</td>
                    <td class="underListItem">Item 2</td>
                    <td class="underListItem">Item 3<a href="#"><i class="fa fa-times-circle"></i></a></td>
                </tr>
            </tbody>
        </table>
    </div>    
    
    

    <script src="./app.js"></script>
</body>
</html>

Javascript 获取 table 正文的最后一行并在该行被删除后隐藏 table 的代码

Javascript code to get last remaining row of the table body and hide the table once that row gets deleted

javascript

dom-manipulation