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

Question

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

<div class="my_body"> 

我的 html 内容

<table>

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>