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

Question

我想从我的网页正文中删除不需要的html元标记和内容，因为这些标记会在移动视图中导致问题。这些内容来自外部服务器。想要删除div和table标签之间的所有内容

<table>

我的HTML内容

{{1}}

Answer 1

您可以使用 :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>

Answer 2

您可以尝试：

jQuery(".ymail_body").remove();