Remove content using css

Remove HTML element completely just by using CSS?

CSS is for styling — not for direct DOM manipulation. If display: none doesn’t do what you are trying to do, then it is not possible.

5 Answers 5

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.

Agreed, but note that in some circumstances, replaced content might be unloaded, actually making some elements unreachable to js anymore (but arguably they’re not part of the document tree per se, even if reachable through DOM APIs.)

I had to downvote because events won’t fire on a display: none; element. At least in many cases. If you correct me, I’ll have no problem upvoting this answer.

@Cody: You’re not wrong; intuitively an element that’s not there can’t be interacted with to fire events. The event handlers are still there and can still be called, at least programmatically. I think my answer could be worded better.

@BoltClock: you are right. you can still receive events dispatched on display: none; elements. I would have upvoted your response but SO has locked my action (I’m sorry). Here’s a CodePen of proof you are correct: codepen.io/cScarlson/pen/zYPLvRw?editors=1111

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.

‘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!’

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.

Источник

Hide or remove part of the content of an HTML element using CSS

I can’t come up with anything better than a combination of jQuery and css, it’s not the most beautiful code ever but it does work for this situation in which you don’t have control over the html: http://jsfiddle.net/entgqjzk/2/ The css class «hidden-for-mobile» could be used for example combined with a seperate stylesheet for mobile devices (or pseudo selectors for different screen sizes) Solution: You can use jsoup for removing html elements from string and also for xss security http://jsoup.org/cookbook/cleaning-html/whitelist-sanitizer and to just remove html, try this: EDIT: thanks to user2640782 With this code the output will be » An apple a day keeps the Doctor away».

Hide or remove part of the content of an HTML element using CSS

The problem

I cannot alter the way in whcih the HTML below is output, but I do need to amend the way in which it is displayed. I know I can achieve my desired results with jQuery , but I’d like to do it with pure CSS possible?

What exactly I need to do

I need to show the input from the HTML below, but the label itself is superfluous. The tag can stay or go, I’m not bothered by that, but Username and
need to be gone.

Obviousely I cannot use label[for=»user_login»] < display: none; >, as this will fail because it will hide everything within the selector.

The original HTML

The desired HTML

jQuery approach

Why I don’t want to use jQuery

The login for in question is displayed differently depending on screen size. On smaller devices I requre the labels hidden (to save space), while on larger screens the label should still be visible. Using the jQuery approach will remove the labels in both cases.

While I know I can check the screen widht on load, and then use resize event (if necessary), should the screen size change (on a tablet, portrait to landscape for example) the labels could be removed and then not visible when they need to be.

Can I achieve this result (or similar) with pure CSS ?

Here is a jsfiddle: http://jsfiddle.net/entgqjzk/

I modified the css I found at Hide text node in element, but not children

This doesn’t remove the whitespace as you indicated. I can’t come up with anything better than a combination of jQuery and css, it’s not the most beautiful code ever but it does work for this situation in which you don’t have control over the html:

The css class «hidden-for-mobile» could be used for example combined with a seperate stylesheet for mobile devices (or pseudo selectors for different screen sizes)

Have you tried pseudo classes? http://css-tricks.com/a-call-for-nth-everything/

Thanks to @geoffreydv for the idea of using visibility .

In conjunction with that, I was able to use the CSS below to effectively hide the whitespace occuped by the text within the label.

body.login #loginform label[for="user_login"], body.login #loginform label[for="user_pass"] < display: inline-block; height: 50px; position: relative; visibility: collapse; width: 300px; >body.login #loginform input#user_login, body.login #loginform input#user_pass

Java — How to remove HTML element of String?, String noHTMLString = htmlString.replaceAll («\\<.*?>«,»»); It uses regular expressions to remove all HTML tags in a string. More specifically, it removes all XML like tags from a string. So will be removed even though it is not a valid HTML tag. But its good for most intents and purpouses. Hope this …

How to remove elements from HTML/Change the page entirely?

I am using the following tag to load my scripts and start the game I am making, but all the original elements stay from the original webpage.

Is there any way to remove the elements like the background sound and image when I press the button? I tried using href to load another html page, but I don’t think that is the best way to do it, plus it didn’t work. Any help appreciated, thanks!

You can use remove() (jQuery)

Similar to .empty() , the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

 
Hello
 how are 
you?
 Call remove() on paragraphs

Removes all paragraphs that contain «Hello» from the DOM. Analogous to doing

$("p").filter(":contains('Hello')").remove(). 

Javascript — How to delete an HTML element inside a div, Because you want to delete the whole element, it’s better to make it contenteditable=»false» so that browser won’t let the contents of an element to be deleted. Then you can use this attribute for tests in event handler as follows:

How can I remove and replace content in a HTML tag using CSS? [duplicate]

I need to change the content of a link, but I can only change the CSS of the page I’m working on. I tried using the content property in :before and :after pseudo elements. But I didn’t find a way to replace the value with the new one. I was able only to append the content to the value specified between tags, at the beginning and at the end, instead of completely replacing it like I need.

What can I do to actually «replace» the content of the link tag?

Use a font-size trick like this:

Источник

Css css hide div and remove content

There is no trim in CSS (yet except in FireFox Note this example will also hide divs that have pseudo class content To handle pseudo class content we can do this: Solution 2: Your code does work but in the near future because the Specification has changed to make consider white spaces Until then, there is a Firefox solution using Solution: add these styles: (If instead you want to hide divs which contain no text on their own, but which contain child nodes that do have text, it gets a bit more complicated; in that case you’d need to filter the contents based on node type as in @gaetanoM’s answer.)

Cannot remove / hide Div Class with css

Hide div tag on mobile view only?, You will need two things. The first is @media screen to activate the specific code at a certain screen size, used for responsive design.

How to Hide Elements with CSS on Your Website

In today’s video, we’ll learn how to hide elements with CSS on https://www.elegantthemes Duration: 2:03

How To Hide DIV, Button, Image (Picture) or HTML

How To Hide DIV, Button, Image (Picture) or HTML Element Dynamically In JavaScript · 0:10 Duration: 3:37

Remove a div when no text inside but has another div inside using CSS or Jquery [duplicate]

If there are no text contents within the divs you want to hide, this is simple: take the element’s text() , then trim() out whitespace, and see if there’s anything left. If not, you can remove or hide the element.

   Has contents (If instead you want to hide divs which contain no text on their own, but which contain child nodes that do have text, it gets a bit more complicated; in that case you'd need to filter the contents based on node type as in @gaetanoM's answer.)

You can do this so, but you need to use listener like a document.onload . Since it’s only a snippet it cannot use it. So don’t forget about it.

let divs = [. document.querySelectorAll('div')]; console.log(divs); divs.forEach((e)=> < if (!e.innerHTML) < e.classList.add('none'); >>);

Also as I found below you can use

How to remove specific div element by using JavaScript?, Using outerHTML property: The outerHTML property is used to set the contents of the HTML element. Hence we can remove a specified ‘div’

Remove a DIV only using html & css

As of November 2021 impossible without JavaScript. There is no trim in CSS (yet except in FireFox

Note this example will also hide divs that have pseudo class content

document.querySelectorAll(".abc") .forEach(div => div.hidden = div.textContent.trim() === "") // alternative if you want to use a class: // div.classList.toggle("hide",div.textContent.trim() === "")

div.abc < border: 1px solid red; height:50px; >div.pscontent:after < content: "Also will be hidden">div.abc:empty

To handle pseudo class content we can do this:

const hideEmpty = (sel, testPseudoContent) => < const elems = document.querySelectorAll(sel) elems.forEach((elem,i) => < const text = [elem.textContent.trim()] if (testPseudoContent) < ["before", "after"].forEach(ps =>text.push(window.getComputedStyle(elem, ps).getPropertyValue("content").trim())) > elem.hidden = text.join('').length === 0; >) >; hideEmpty('.abc') hideEmpty('.def.pscontent', true)

div.abc < border: 1px solid red; height: 50px; >div.def < border: 1px solid green; height: 50px; >div.pscontent:after

Your code does work but in the near future because the Specification has changed to make :empty consider white spaces

Note: In Level 2 and Level 3 of Selectors, :empty did not match elements that contained only white space. This was changed so that that—given white space is largely collapsible in HTML and is therefore used for source code formatting, and especially because elements with omitted end tags are likely to absorb such white space into their DOM text contents—elements which authors perceive of as empty can be selected by this selector, as they expect. ref

Until then, there is a Firefox solution using -moz-only-whitespace

div.abc < border: 1px solid red; height:50px; >div.abc:-moz-only-whitespace div.abc:empty

Remove a div when no text inside but has another, If there are no text contents within the divs you want to hide, this is simple: take the element’s text() , then trim() out whitespace,

How to remove the white space in ( display:none; -or

visibility: hidden !important; display: none !important; opacity: 0 !important;

Источник