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

Question

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

<div class="my_body"> 

我的html内容

<table>

Answer 1

您可以使用:not()选择器并选择除table元素，然后使用remove()将其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();