如何删除 dataTables 按钮的 DIV 类 dt 按钮？答案

【问题标题】：How can I remove DIV class dt-button of a dataTables button?如何删除 dataTables 按钮的 DIV 类 dt 按钮？
【发布时间】：2018-11-12 03:24:32
【问题描述】：

我正在使用带有 Button 的 Datatable。我想在其他按钮中对齐数据表按钮。我试过这个代码

var table = $('#example1').DataTable();



var buttons = new $.fn.dataTable.Buttons(table, {
       buttons: [
            {
                extend: 'csvHtml5',
                text:      '<span class="fa fa-download"></span> &nbsp;CSV',
                className: "btn btn-default btn-sm"
            },
            {
                extend: 'pdfHtml5',
                text:      '<span class="fa fa-print"></span> &nbsp;Print',
                className: "btn btn-default btn-sm",
                titleAttr: 'Print',
                download: 'open',
                exportOptions: {
                    columns: [ 0, 1, 2, 3,4, 5, 6, 7, 8 ]
                },
                orientation: 'landscape',
                pageSize: 'A4'
            },

      ]
  }).container().appendTo($('#buttons'));

这是我的html代码

<span class="new-button"><a href="{{url('admin/vehicles/create')}}" class="btn btn-success btn-sm"><span class="fa fa-plus"></span> &nbsp;Add New</a></span>
<div id="buttons"> </div>

当我在查看源代码中运行时..

    <span class="new-button"><a href="#" class="btn btn-success btn-sm"><span class="fa fa-plus"></span> &nbsp;Add New</a></span>
<div id="buttons">
    <div class="dt-buttons">
        <button class="dt-button buttons-csv buttons-html5 btn btn-default btn-sm" tabindex="0" aria-controls="example1" type="button">
        <span><span class="fa fa-download"></span> &nbsp;CSV</span></button> 
        <button class="dt-button buttons-pdf buttons-html5 btn btn-default btn-sm" tabindex="0" aria-controls="example1" type="button" title="Print"><span><span class="fa fa-print"></span> &nbsp;Print</span></button> 
    </div>
</div>

我要对齐的代码

<span class="new-button"><a href="#" class="btn btn-success btn-sm"><span class="fa fa-plus"></span> &nbsp;Add New</a></span>
<div id="buttons">
        <button class="dt-button buttons-csv buttons-html5 btn btn-default btn-sm" tabindex="0" aria-controls="example1" type="button">
        <span><span class="fa fa-download"></span> &nbsp;CSV</span></button> 
        <button class="dt-button buttons-pdf buttons-html5 btn btn-default btn-sm" tabindex="0" aria-controls="example1" type="button" title="Print"><span><span class="fa fa-print"></span> &nbsp;Print</span></button> 
</div>

【问题讨论】：

好的，完成了....
如果完成后将您的发现作为答案发布。

标签： javascript jquery css datatables

【解决方案1】：

刚刚添加了这个jquery

var cnt = $(".dt-buttons").contents();

$(".dt-buttons").replaceWith(cnt);
  var cnta = $("#buttons").contents();
  $("#buttons").replaceWith(cnta);

How to remove only the parent element and not its child elements in JavaScript?

【讨论】：