如何添加和jQuery的对话框中删除表

Question

我想补充，后来删除表与jQuery的对话框中的所有行。我也想一些CSS样式添加到该表/行。该表应该进入空DIV ID =对话框的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>

Answer 2

该表绑定到dialog，你可以尝试删除它的孩子。

$("#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");
        $("#dialog-message1").children().remove();
      }
    }
  });
});

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