I needed to remove some div calling for ads network from mobile website display. I’ve already made it with CSS media queries, but it is better to remove the whole element, because when ads are hidden but loaded, some misunderstanding may occur with these networks.
So here’s some JavaScript I’ve compiled for such task.
I have to to remove div#bsap.
<div id="topAds" >
<script>
(function($) {
$(document).ready(function() {
if ($(window).width() < 768) {
$('#bsap').remove();
}
})
})(jQuery);
</script>
<div id="bsap"></div>
</div>You will need jQuery for such code to function. Every WordPress now has it.
The only problem with the code is that when small width is changing to wider one, it will not bring ads back. But not a big problem, not many users change width when browsing. You may found a script for page reload, if needed.
Remove Empty Element with CSS
When element inside some other element with a padding removed on-the-fly you may want to remove it completely with CSS.
A small CSS trick to remove an empty element, that not many developers are aware of its existence.
#masthead + #topAds:empty {
display: none;
}And recently there are rumors of :blank pseudo-class, which is able to remove elements containing some empty spaces. :empty can’t remove them, as you may find. We are talking about things like
