To collapse div and p by CSS

Question

How can you collapse div and p -elements if they are empty by CSS such that the tags are not shown for the user in the source code?

These elements are in my source code although they are empty. This causes bugs with the rest of the site.

I run this unsuccessfully

div.unsuccessful,
div.unsuccessful p {
    visibility: collapse;                                                                                                                                                                                      
}

This suggests me that you apparently cannot do such a thing by CSS. Perhaps, other tool such as PHP is needed.

Answer 1

Yes, if you want to stop them being in the source, you'll need to make the appropriate considerations in your server code. Alternatively, you can also set the HTML in JavaScript, but it's not the recommended approach for this problem, probably. You may like to say a bit more though, about what you're trying to do.

Answer 2

div { display: none; }

removes an element completely from the page.

It'll still show up in your source code, no matter what you do with CSS. The browser combines the HTML source and the CSS directives into a displayable page, the original source is not modified. CSS can only influence the visual display of elements, it can not alter elements. To actually remove elements from the DOM you'll need Javascript (or not put the elements there in the first place).

Answer 3

Visibility property is intended to set whether the content of the object is displayed or not. It won't remove the element from inside the DOM.

collapse New for Windows Internet Explorer 8

Used in tables to remove rows and columns; for all other elements, same as hidden.

Also why do you want to do this?

Answer 4

Yes, you will have to use server side processing to show or not-show some code to the user:

if ($showAdminLink) {
    echo "<p><a href=\"admin.php\">Admin panel</a></p>";
}

No matter what tricks you try, anything done on the client side (HTML, Javascript, CSS) can be altered and played with.

Answer 5

CSS has no influence on the actual HTML code, so this cannot be done. In the (upcoming) CSS3, you could stop them from being rendered using the :empty pseudo-class:

div:empty {
    display: none;
}

That is of course not the same thing, but it would probably fix the problems you're having.. if only browsers actually supported it, which they don't, yet.

The best option is to remove them at the server, using a scripting language like PHP. I suppose you could do it client-side with JavaScript, but that's a horrible solution, imo.

That being said, what problems are you having with these empty tags? Why are they there in the first place? It seems to me that some redesign is in order, to prevent the unnecessary tags from being generated in the first place.

Also, be careful. Empty tags are not always meaningless. In fact, removing every empty <div> out there can be considered harmful.