JavaScript清除变量值：模态关闭时重置收据数据的问题

问题分析 #

你遇到的核心问题有两个：

1. 每次点击print按钮时，用append()向#table容器追加表格内容，导致旧数据不会被清除，新数据直接叠加在后面
2. delete table语句无效——delete仅用于删除对象的属性，无法删除用var/let声明的变量，所以这个操作对重置变量没有作用

解决方案 #

1. 生成表格时替换而非追加内容 #

修改点击print按钮的JavaScript代码，每次生成新表格前先清空容器，再用html()替换内容（而非append()）：

// 清空表格容器原有内容
$('#table').empty();

// 构建新表格HTML
let table = '<table>';
table += '<tr class="tabletitle"><td class="item"><p><b>Item</b></p></td><td class="text-align-right"><p><b>Qty</b></p></td><td class="text-align-right"><p><b>Rate</b></p></td><td class="text-align-right"><p><b>Total</b></p></td></tr>';
table += `<tr class="tabletitle"> <td class="text-align-right" colspan="3"><p><b>Grand Total :</b></p></td><td class="text-align-right"><p>${data['orders'][0].total_amount}</p></td></tr>`;
table += `<tr class="tabletitle"> <td class="text-align-right" colspan="3"><p><b>Discount :</b></p></td><td class="text-align-right"><p>${data['orders'][0].discount}</p></td></tr>`;
table += `<tr class="tabletitle"> <td class="text-align-right" colspan="3"><p><b>Net Receivable Amount :</b></p></td><td class="text-align-right"><p>${data['orders'][0].net_receivable_amount}</p></td></tr>`;
table += `<tr class="tabletitle"> <td class="text-align-right" colspan="3"><p><b>Paid Amount :</b></p></td><td class="text-align-right"><p>${data['orders_paid_amount'][0].paid_amount}</p></td></tr>`;
table += '</table>';

// 替换容器内容
$('#table').html(table);

// 重置table变量
table = null;

// 显示模态框
$('#printModal').modal('show');

2. 监听模态框关闭事件，彻底重置内容 #

添加模态框关闭的监听事件，确保关闭时清空所有动态填充的内容，避免残留：

// 监听Bootstrap模态框的关闭完成事件
$('#printModal').on('hidden.bs.modal', function () {
    // 清空表格容器
    $('#table').empty();
    // 重置订单ID、分支名称等静态内容
    $('#orders_id').text('');
    $('#branch_name').text('');
    // 重置全局table变量（如果存在）
    if (typeof table !== 'undefined') {
        table = null;
    }
});

关键说明 #

• 用html()替换append()：直接覆盖容器内的所有内容，从根源避免旧数据积累
• 用table = null替代delete table：正确重置变量，因为delete无法删除局部/全局变量
• 监听hidden.bs.modal事件：确保模态框完全关闭后再执行重置操作，覆盖所有关闭场景（包括点击Close按钮、点击模态框外部、按ESC键）

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