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>
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>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>
querySelectorAll() then iterate and remove them
