datatables delete child

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-html5-1.5.1/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-html5-1.5.1/datatables.min.js"></script>
<table id="outer">
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Outer Table
        <div>
          <table id="inner">
            <thead>
              <tr>
                <th>Inner Table</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <button>
                  Delete
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

JavaScript

// find elements
$("#outer").DataTable({
  dom: 'Bt',
  buttons: [
    'csvHtml5'
  ]
});

let table2 = $("#inner").DataTable({
  dom: 'Bt',
  buttons: [
    'csvHtml5'
  ]
});

$("button").on("click", function(){
	table2.destroy();
});