如何使用 js/jquery 删除 DIV 的 innerHTML 中的元素？

Question

我正在获取变量中的一个元素

var pageContent = document.getElementById("loadRepy").innerHTML;

此变量具有如下所示的内部 html

<style>
     .dataTables_length::after {
         margin-left: 100px;
         content: "";
     }
</style>

<b><div id="print_head"><pre style="font: 15px Arial, sans-serif;">** KUPPAM COMPANY IN CLOUD **      TRIAL BALANCE of 14/02/2022

</pre></div></b>
<div style="display: none;" id="print_head0">** KUPPAM COMPANY IN CLOUD **      TRIAL BALANCE of 14/02/2022</div><div style="display: none;" id="print_head1"></div><br><div id="myTable_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer"><div class="dt-buttons">          <button class="dt-button buttons-copy buttons-html5" tabindex="0" aria-controls="myTable" type="button"><span>Copy</span></button> <button class="dt-button buttons-csv buttons-html5 btn btn-primary mr-1" tabindex="0" aria-controls="myTable" type="button"><span>CSV</span></button> <button class="dt-button buttons-pdf buttons-html5 btn btn-primary mr-1" tabindex="0" aria-controls="myTable" type="button"><span>PDF</span></button> <button class="dt-button buttons-excel buttons-html5 btn btn-primary mr-1" tabindex="0" aria-controls="myTable" type="button"><span>Excel</span></button> <button class="dt-button buttons-copy buttons-html5" tabindex="0" aria-controls="myTable" type="button"><span>Print</span></button> </div><div id="myTable_filter" class="dataTables_filter"><label>Search:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="myTable"></label></div><table id="myTable" class="table display table-bordered dataTable no-footer" role="grid" aria-describedby="myTable_info" style="width: 100%;">
<thead>
    <tr role="row" class=""><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 74px;">MCO</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 67px;">SCO</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 434px;">Description</th><th style="text-align: right; width: 322px;" class="sorting_disabled" rowspan="1" colspan="1">Debit</th><th style="text-align: right; width: 321px;" class="sorting_disabled" rowspan="1" colspan="1">Credit</th></tr>
</thead><tbody>
 
  <tr class="odd hover click-row">
   <td>022</td>
   <td>000</td>
   <td>SUBSIDY                       </td>
   <td style="text-align: right;"></td>
   <td style="text-align: right;">14,82,477.00</td>
   </tr><tr class="even">
   <td>024</td>
   <td>000</td>
   <td>PROFIT &amp; LOSS APPROPRIATION   </td>
   <td style="text-align: right;"></td>
   <td style="text-align: right;">10,18,23,376.73</td>
   </tr></tbody></table><div class="dataTables_info" id="myTable_info" role="status" aria-live="polite">Showing 1 to 137 of 137 entries</div></div><br><b><div id="print_footer">*Report taken by P T GOPINATH                  on 14/02/2022 at 12:52:58 in CREAM PACKS P.LTD, KUPPAM, TALIPPARAMBU *</div>

现在我想删除样式标签中的 css（包括那个标签> 和一些使用 class 名称的 div 标签，并重新分配给另一个变量目的。我该怎么做。请提供任何建议。

Answer 1

如果您想从代码示例中的 html 中删除样式，您可以执行以下操作。

document.querySelector('#loadRepy style').remove()

如何使用 js/jquery 删除 DIV 的 innerHTML 中的元素？

How to remove elements inside innerHTML of a DIV using js/jquery?

javascript

html

jquery

css-selectors

innerhtml