How div can be removed according size screen?

Question

I know I can hide element using this css:

@media only screen and (max-height: 350px) {
    .sizeResponsive{
        display: none;
    }
} 

but I need to remove element.

Any idea who can I remove div according to screen size using CSS?

Answer 1

You can't do this using CSS as it does not have the ability to affect the DOM. Only the way it is displayed can be affected.

Using jQuery, you could do $(window).height() or $(document).height() (or screen.height if you prefer to stick to plain javascript) to get the height.

Get the div by using either var el = $('div.sizeResponsive'); or var el = document.querySelector('div.sizeResponsive'); and remove it from the DOM like so: el.parentElement.removeChild(el);

In order to achieve the effect you are looking for with CSS, you would have to add an eventlistener like so:

// Usually it's a good idea to store your eventhandler in a variable so that you can dispose of it at a later time
var resizeHandler = function() {
    if (screen.height < 350) {
        var responsiveDivs = document.querySelectorAll('div.sizeResponsive');
        for (i = 0; i < responsiveDivs.length; i++) {
            responsiveDivs[i].parentElement.removeChild(responsiveDivs[i]);
        }
    }
}

document.onload(function() {
    window.addEventListener('resize', resizeHandler);
});

// When you no longer need it
window.removeEventListener('resize', resizeHandler);

The question remains though, why do you want to remove the element per se? Now you are losing these elements and you would have to add them again if the screen size goes back into your threshold which allows them to be displayed.

You could store the elements in variables and re-add them if the height gets within bounds again, but this seems unnecessarily complicated for a problem that the CSS property display: none; solves just fine.

EDIT: Sometimes it's just fun to solve these little things anyway. Here's a codepen that does this without any jQuery, in case anyone's interesed: http://codepen.io/anon/pen/YWvxwQ

Answer 2

use javascript or jquery for this task

Calculate width of window using screen.width in javascript or $(window).width() in jquery and remove your desired elements according to screen width you got.

Answer 3

display:none will make it hidden and not affect the flow of the layout, however it will still be in the html source code, so it will load with the page and the browser will decide what to do with it. This means that an outdated browser may no understand display:none and show it anyway.

If you don’t want it to load to a mobile version then it shouldn’t be sent from the server. Or use js to add it after the page loads to a non-mobile browser. This could also eliminate outdated browsers from showing it.

Keep in mind that CSS is for style only, it does not have the ability to affect the DOM

Answer 4

I'm pretty sure that css can not manipulate DOM. So, there is no way to truly remove element.

display: none makes element hidden, so there is no space allocated for the element. You can also consider using position: absolute, which removes element from the document flow, and setting height to 0.

There is an SO question with more details: How to remove an element from the flow of HTML/CSS?

Answer 5

You cannot remove an element using css alone, removing an element is very costly (more expensive than hiding it.) since the HTML needs to rebuild the DOM tree and the RENDER tree on each child removal.

I would suggest hiding it and disabling its javascript functionality through javascript.

window.addEventListener('resize', function() {
   if(window.innerHeight > 350) {
      ... // .style.display = 'none';
      ... // disable functionality.
   }
});