JS消费记录开发：删除全部条目后如何让空表提示tr元素重新显示

解决方法 #

错误原因

1. 空表判断逻辑位置错误：你写的空表判断代码放在了「添加记录」的点击事件中，只有点击添加按钮时才会执行，删除记录时根本不会触发这段逻辑，自然没法重新显示空提示
2. 节点直接删除有问题：你第一次添加记录时调用ifEmpty.remove()直接把空提示节点从DOM树中彻底移除了，后续就算判断到表格为空，也没法正常把已经删掉的节点再加回去，多次添加还会报错

优化后的实现

建议改用控制节点显示/隐藏的方式实现，逻辑更简单，也不会出现节点丢失的问题，修改后的JS代码如下：

let nameInput = document.querySelector(".name");
let dateInput = document.querySelector(".date");
let amountInput = document.querySelector(".amount");

let button = document.querySelector(".add-btn");
let ifEmpty = document.querySelector(".if-empty");
let table = document.querySelector("table");

button.addEventListener("click", function() {
    // 新增记录时隐藏空提示
    ifEmpty.style.display = 'none';
    
    // 创建消费记录行
    let holder = document.createElement("tr");
    let row = document.createElement("td");
    let btnRow = document.createElement("td");
    let removeButton = document.createElement("button");

    table.appendChild(holder);
    holder.appendChild(row).textContent = nameInput.value;
    holder.appendChild(row.cloneNode(true)).textContent = dateInput.value;
    holder.appendChild(row.cloneNode(true)).textContent = amountInput.value;
    holder.appendChild(btnRow);
    btnRow.appendChild(removeButton).textContent = "REMOVE ENTRY";

    // 删除消费记录逻辑
    removeButton.addEventListener("click", function() {
        holder.remove();
        // 删除后判断是否还有记录：排除表头行，剩下的行数如果为0就显示空提示
        const allRows = table.querySelectorAll('tr:not(:first-child)');
        if (allRows.length === 0) {
            ifEmpty.style.display = 'table-row';
        }
    });
});

额外说明

如果要坚持用移除/添加节点的方式实现，需要注意每次移除后要把节点存好，不要丢失引用，而且添加前要先判断空提示节点是否已经在表格里，避免重复添加。用显示隐藏的方式对入门学习者更友好，出错概率更低。

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