javascript - 如何从 jquery 对话框中添加和删除表

Question

我想添加并稍后从 jquery 对话框中删除包含所有行的表。我还想向该表/行添加一些 css 样式。表格应该进入空的 div id=dialog-message1。

有人可以帮我解决这个问题吗？

下面附上函数脚本部分:

$("#dialog-message1").hide();
$('.confirmation1').on('click', function(e) {
    e.preventDefault();
    var lnk = $(this).attr('href');
    var product_name = $(this).parents("tr").find("td").first().html();
    console.log(product_name);

    $("#dialog-message1").append("<table id='tableINFO'>");
    $("#dialog-message1").append("<tr><th>Nazwa produktu</th><th>Waga (g)</th><th>Kalorie (Kcal)</th></tr>");
    $("#dialog-message1").append("<tr><td>Table data</td><td>Table data</td><td>Table data</td></tr>");

    $("#dialog-message1").dialog({
        modal: true,
        buttons: {
            Ok: function() {
                    $(this).dialog("close");
                    //$( "tr" ).remove();
            }
        }
    });
});

我尝试添加行和列，然后删除它，但由于没有提供 ID，我只能从整个页面中删除表格。

我可以看到行，但我无法删除它。

Answer 1

https://jsfiddle.net/asimshahiddIT/3vdup6jr/

$("#dialog-message1").hide();
$('.confirmation1').on('click', function(e) {
    e.preventDefault();
    var lnk = $(this).attr('href');
    var product_name = $(this).parents("tr").find("td").first().html();
    console.log(product_name);

    $("#dialog-message1").append("<table id='tableINFO'><tr><th>Nazwa produktu</th><th>Waga (g)</th><th>Kalorie (Kcal)</th></tr><tr><td>Table data</td><td>Table data</td><td>Table data</td></tr>");

    $("#dialog-message1").dialog({
        modal: true,
        buttons: {
            Ok: function() {
                    $(this).dialog("close");
                    $( "#dialog-message1 table" ).remove();
            }
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dialog-message1">
</div>
<button class="confirmation1">
CLICK
</button>