CODEWITHSUNDEEP
htmlcsselement
silentwarrior
silentwarrior

Reputation: 356

Remove HTML element completely just by using CSS?

Just like removeAttribute in JavaScript, after which the element won't be visible in the source.

Upvotes: 17

Views: 77664

Answers (6)

Alcides Silva
Alcides Silva

Reputation: 11

With CSS you must change the attribute display to none.

And with JavaScript you must change de id attribute to another value that doesn't make sense to the application.

Upvotes: 1

Michael
Michael

Reputation: 1

You actually can. Not directly in CSS but in combination with Javascript/jQuery you could.

In HTML give a class of "removeFromDom" to the Elements you want to have removed.

<p class="removeFromDom">your text here</p>

In CSS you add these Lines to make it invisible, if JS is not working.

.removeFromDom { display:none !important; visibility:hidden !important; }

In a jQuery file, that you load on any site, create this function::

$(document).ready(function() {
  $(".removeFromDom").remove();
});

Et voila.. your jQuery file removes your Items from the DOM. I wouldn't recommend it for security reasons if there is a link nobody should be able to see anytime..

Upvotes: -3

BoltClock
BoltClock

Reputation: 723618

You cannot remove an element from the DOM tree using CSS. You can only prevent it from being rendered in the layout with display: none; doing so does not prevent it from responding to events or cause it to be ignored by CSS selectors such as + and :nth-child(). You won't be able to interact with an element that's not there so you wouldn't be able to trigger events the usual way, but its "essence" remains, so to speak.

Upvotes: 32

javascriptjames
javascriptjames

Reputation: 124

You can use display: none to hide an element but it will still be on the DOM.

You can also use visibility: hidden and it will also still be on the DOM but the DOM will reflect the same vertical flow even though the element is hidden. In other words if the element is a block, a block space will still be reserved for the hidden element. And with display: none the space will also be removed along with the element as it is hidden.

Unless you use JavaScript, with CSS you are only changing the visibility of a DOM element that is existent on the DOM. Which can absolutely serve your purpose depending on what you are trying to do.

If you need more help, just comment with more detail and I'd be glad to help.

Upvotes: 2

kiranvj
kiranvj

Reputation: 34117

Its not possible with CSS. Even if you use display:none, the element will be still in DOM tree.

CSS is for styling not for DOM manipulation. Use JavaScript for that.

Upvotes: 2

crffty
crffty

Reputation: 444

display: none;

'Unlike the visibility property, which leaves an element in normal document flow,display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code. This is because it is, indeed, removed from the document flow. For all intents and purposes, the item is gone. This can be a good thing or a bad thing, depending on what your intentions are. It can also be damaging to your page if you misuse this property!'

https://www.lifewire.com/display-none-vs-visibility-hidden-3466884

Upvotes: 2

Related Questions