Agfdhyk

I am using Datatable with Button. I want to align the data tables button in other buttons . I tried this Code

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'));  

this is my code in 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>

When i run in view source code..

    <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>

what i want to align the code

<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>

Just added this 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?