关闭对话框时如何清除对话框中的表格

本文介绍了关闭对话框时如何清除对话框中的表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

点击按钮后，会添加2组数据。我使用材料设计。

按钮需要2次点击才能第一次运行功能。由于这一点，数据被添加到表2次。

代码

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; $ b console.log（itemName）; $（＃producttable）。append（ '< td class =mdl-data-table__cell - non-numeric>'+ itemName + '< / td>< td>'+ itemQuantity +'< td>< td>'+ itemPrice +'< / td>< / tr>'）; }）; var dialog = document.querySelector（'dialog'）; var showDialogBu​​tton = document.querySelector（'＃dialog'）; if（！dialog.showModal）{ dialogPolyfill.registerDialog（dialog）; showDialogBu​​tton.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（）; }）;

解决方案

工作：

var element = document.getElementById（producttable） while（element.lastChild）{ element.removeChild（element.lastChild）; }

根据需要添加。

When the button is clicked, 2 sets data is added. I use material design.

Button needs 2 clicks to run function for first time. Due to this, the data is added to table 2 times.

Code

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

解决方案

This should work:

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

Add this as necessary.