javascript - 对话框关闭时如何清除对话框内的表格

Question

单击按钮时，将添加 2 组数据。我使用 Material 设计。

第一次需要点击两次按钮才能运行功能。因此，数据被添加到表中两次。

代码

HTML

<button onclick="purchaseList(orderid)" id="dialog">Button</button>

JS

function popup(listid) {

    var starCountRef = firebase.database().ref('Orders/' +
        listid).child('foodItems');
    starCountRef.on('child_added', snapshot => {

        var snaps = snapshot.val();
        var itemPrice = snaps.price;
        var itemName = snaps.productName;
        var itemQuantity = snaps.quantity;

        console.log(itemName);
        $("#producttable").append(
            '<tr><td class="mdl-data-table__cell--non-numeric">' + itemName +
            '</td><td>' + itemQuantity + '</td><td>' + itemPrice + '</td></tr>'
        );
    });

    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#dialog');
    if (!dialog.showModal) {
        dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function() {


        dialog.showModal();

    });
    dialog.querySelector('.close').addEventListener('click', function() {

        var element = document.getElementById("producttable")
        while (element.lastChild) {
            element.removeChild(element.lastChild);
        }
        dialog.close();

    });

}

Answer 1

这应该有效:

var element = document.getElementById("producttable")
while (element.lastChild) {
    element.removeChild(element.lastChild);
}

根据需要添加此内容。