CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ch3t
ch3t

Reputation: 496

Remove unwanted html contents from webpage using javascript

I want to remove unwanted html meta tags and contents from my webpage body as these tags causing issues in mobile view. and theses contents are coming from external server. want to remove all the contents between div and table tag

<div class="my_body">

my html contents

<table>

Upvotes: 2

Views: 400

Answers (2)

Phuong
Phuong

Reputation: 35

You can try :

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

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115232

You can use :not() selector and select element excepts the table and remove them using 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>

Or you can use prevAll() to select all previous element

$('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>
Using pure JavaScript you can use 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>

Upvotes: 3

Related Questions