how can i remove div tag using java script and retain inner div contents

Question

need to remove this tag and retain inner div contents

<div id="tpTable" style="display: block;">
      <div id="dataTable0_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
        <div class="div dataTables_wrapper form-inline dt-bootstrap no-footer overflow-hidden">
          <div class="row">
            <div class="col-sm-6">
              <div class="dataTables_length" id="dataTable0_length"><label>Show <select name="dataTable0_length" aria-controls="dataTable0" class="form-control input-sm"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> entries</label></div>
              <div
                class="dt-buttons btn-group"><a class="btn btn-default buttons-csv buttons-html5" tabindex="0" aria-controls="dataTable0" href="#" title="Save as CSV"><span>CSV</span></a></div>
          </div>
          <div class="col-sm-6">
            <div id="dataTable0_filter" class="dataTables_filter"><label>Search:<input type="search" class="form-control input-sm" placeholder="" aria-controls="dataTable0"></label></div>
          </div>
        </div>
      </div>
      <div class="div dataTables_wrapper form-inline dt-bootstrap no-footer">
        <div class="row">
          <div class="col-sm-12"></div>
        </div>
      </div>
      <div class="div dataTables_wrapper form-inline dt-bootstrap no-footer overflow-hidden">
        <div class="row">
          <div class="col-sm-5">
            <div class="dataTables_info" id="dataTable0_info" role="status" aria-live="polite">Showing 0 to 0 of 0 entries</div>
          </div>
          <div class="col-sm-7">
            <div class="dataTables_paginate paging_simple_numbers" id="dataTable0_paginate">
              <ul class="pagination">
                <li class="paginate_button previous disabled" id="dataTable0_previous"><a href="#" aria-controls="dataTable0" data-dt-idx="0" tabindex="0"><i class="glyphicon glyphicon-chevron-left"></i></a></li>
                <li class="paginate_button next disabled" id="dataTable0_next"><a href="#" aria-controls="dataTable0" data-dt-idx="1" tabindex="0"><i class="glyphicon glyphicon-chevron-right"></i></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>

Answer 1

It is a three steps process:

1. Copy the children.

const parent = document.getElementById("dataTable0_wrapper");
const children = parent.childNodes;

2. Attach it to the grandparent (parent's parent).

const grandparent = parent.parentElement;
for (const child of children) {
  grandparent.appendChild(child);
}

3. Remove the parent.

grandparent.removeChild(parent);