如何使用 js/jquery 删除 DIV 的 innerHTML 内的元素？答案

【问题标题】：How to remove elements inside innerHTML of a DIV using js/jquery?如何使用 js/jquery 删除 DIV 的 innerHTML 内的元素？
【发布时间】：2022-02-16 17:12:35
【问题描述】：

我在变量中获取一个元素

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（包括那个标签>和几个使用该变量中的类名的div标签，并为我的目的重新分配给另一个变量。我该怎么做。请帮助提出任何建议。

【问题讨论】：

也许你可以做document.querySelector('#loadRepy style').remove()
是否可以将该变量用作父变量并从中删除所有这些内部元素，而不是单独使用 div id 来删除每个元素？
@CarstenLøvboAndersen 请将该评论添加为答案，因为这解决了我的问题。感谢您的帮助。

标签： javascript html jquery css-selectors innerhtml

【解决方案1】：

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

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

【讨论】：