使用javascript从网页中删除不需要的html内容

Remove unwanted html contents from webpage using javascript

本文关键字：不需要 html 内容 删除 javascript 网页 使用      更新时间：2023-09-26

我想从我的网页主体中删除不需要的html元标签和内容，因为这些标签会在移动视图中引起问题。并且这些内容来自外部服务器。想要删除div和表标记之间的所有内容

<div class="my_body">

我的html内容

<table>

您可以使用:not()选择器并选择除table之外的元素，然后使用remove()将其删除

$('div.ymail_body>:not(table)').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row ymail_body">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <!--[if gte mso 9]> <style data-immutable> table td { border-collapse: collapse; } 
</style> 
<![endif]-->
  <style data-immutable="">
    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
      .mobile-hide {
        display: none!important
      }
      .mobile-wide {
        float: none!important;
        width: 100%!important
      }
      .mobile-block {
        display: block!important;
        width: 100%!important
      }
      .reply {
        padding: 5px 0 0 15px!important
      }
    }
  </style>
  <table>
    <tr>
      <td>1</td>
    </tr>
  </table>
</div>

或者您可以使用prevAll()来选择所有以前的元素

$('div.ymail_body table').prevAll().remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row ymail_body">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <!--[if gte mso 9]> <style data-immutable> table td { border-collapse: collapse; } 
</style> 
<![endif]-->
  <style data-immutable="">
    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
      .mobile-hide {
        display: none!important
      }
      .mobile-wide {
        float: none!important;
        width: 100%!important
      }
      .mobile-block {
        display: block!important;
        width: 100%!important
      }
      .reply {
        padding: 5px 0 0 15px!important
      }
    }
  </style>
  <table>
    <tr>
      <td>1</td>
    </tr>
  </table>
</div>
使用纯JavaScript，您可以使用querySelectorAll()

[].forEach.call(document.querySelectorAll('div.ymail_body>:not(table)'), function(ele) {
  ele.parentElement.removeChild(ele);
  // ele.remove();
  // remove() doesn't work for IE 7 and below
});
<div class="row ymail_body">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <!--[if gte mso 9]> <style data-immutable> table td { border-collapse: collapse; } 
</style> 
<![endif]-->
  <style data-immutable="">
    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
      .mobile-hide {
        display: none!important
      }
      .mobile-wide {
        float: none!important;
        width: 100%!important
      }
      .mobile-block {
        display: block!important;
        width: 100%!important
      }
      .reply {
        padding: 5px 0 0 15px!important
      }
    }
  </style>
  <table>
    <tr>
      <td>1</td>
    </tr>
  </table>
</div>

您可以尝试：

jQuery(".ymail_body").remove();
相关文章：