Remove content with css

Forums

Hey there, I’ve recently been having a lot of fun with media queries and I’ve been incorporating them in most of my projects. Though I hit a wall on my most recent project. Initially on my full size version my footer has four sections all in line, my first media query was going to change it from four in a row to two in a row then another two below that. That was all fine but I needed to make a mid range version between the two and as a result I’m left with an uneven footer with three sections on top and one on the bottom. The only thing I can think of to fix this is to hide the last box with display:none or visibility:hidden but the height of the box is still there, I’ve tried setting the width and height of the box to 0px and all of the different positioning to no avail. No doubt this can be fixed with something simple that I have overlooked so if anyone has an answer please let me know. Alternatively if anyone has a solution to make it seem less uneven that does not remove the box I welcome your suggestions. http://www.jamiepates.co.uk/Express

the boxes need to stay the same size? why don’t you just clear the second two boxes below the first two and make everything 50% width? that would look consistant…

But doing that on such a wide width would not match up with the size of everything else, I realise that I didn’t include a link so I will add one so you can get a better understanding: http://www.jamiepates.co.uk/Express

around them, it’s because I’ve got a list inside that list and it was the only way I could think of doing it so I could target list items in the original list and exclude ones in the list within that list. Inception much? I’ll figure out a better solution once I’ve got everything working correctly.

Источник

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;

Источник

How to remove specific text with CSS

Solution 1: You can add another to make sure text is hidden, Solution 2: You can use visibility property in media query to solve it Solution 3: Here’s one approach: For your mobile styles set on the element to hide the text, then set on generated content to show the icon. Question: I have a tag link with the text «Suggestions» but in mobile devices I have a CSS rule to change it to an icon as follows: The problem is that in mobile devices also appears the text «Suggestions» and I want only the icon.

Remove text from CSS

I’m using WordPress and I want to remove author info from a box in the footer. This is the HTML code of the box:

This is the image of Footer box

I just removed author name directly in CSS with:

Now I need to remove the slash between «Nessuna risposta» and also the word «di» (in English «by»). I don’t know how to do because this is text and not a class. Firefox Inspector show the text as #text

If you want to watch it directly on the website, go here and later go down on the page.

For the slash it’s a.entry-comments + span.entry-separator:

For the word «di» it would be best to wrap it in a span and assign that a class, which you can hide with display: none; .

How to remove the fill color of a text in css?, you can do this easily by setting the color to transparent in css. for further information check this guide:

Remove text from before content CSS

I have a tag link with the text «Suggestions» but in mobile devices I have a CSS rule to change it to an icon as follows:

The problem is that in mobile devices also appears the text «Suggestions» and I want only the icon. Any idea of how to solve it?

You can add another to make sure text is hidden,

You can use visibility property in media query to solve it

a < position:relative; padding:4px 0px 0px 20px; >a:before < font: normal normal normal 14px/1 FontAwesome; content: "\f129"; display: inline-block; font-weight: normal; font-style: normal; font-size: 22px; position: absolute; top: 0; left: 0; >@media screen and (max-width: 767px) < a< visibility: hidden; >a:before < visibility: visible; >>

For your mobile styles set visibility: hidden; on the a element to hide the text, then set visibility: visible; on generated content to show the icon.

Note that the visibility property is different than the display property in that it allows a parent element to be hidden and a child to be visible.

hidden

The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have ‘ visibility: visible ‘.

Demo Snippet:

@media (max-width: 600px) < a < visibility: hidden; max-width: 0; >a:before < font-family: "Linearicons"; content: "\e697"; display: inline-block; font-weight: normal; font-style: normal; font-size: 22px; position: absolute; top: 0; left: 0; visibility: visible; >>

Codepen demo (Resize to see effect)

How to remove specific text with CSS, You can’t remove any element using CSS but you can hide element using display: none property. – Mohammad. Jun 13, 2018 at 11:00. 2.

Remove text and only leave icon under @media(min-width: 768px)

I have a tab menu that I am presenting on my web page. However, when resizing I am being met with an unexpected behavior, hence my goal is to remove the text and leave only the fa icon when the device is a phone basically @media(min-width:768px).

 
 
 
Home
 
Resume
 
Portfolio
 
Contact
 
 
 

I would like to remove those names Home, Contact, Resume, Portfolio when the device is @media@media(min-width:768px).

This is how my @media query currently looks like:

 @media (max-width: 768px) < #main-header .port-item < width: 25%; >#main-header .port-item .fa < font-size: 1em; >.map-responsive < margin-top: 15px; >> 

Here’s a picture of what I am referring to:

Add a span tag around your text, and make it display: none in a media query, such as @media (max-width: 768px) .

@media (max-width: 768px) < #main-header .port-item < width: 25%; >#main-header .port-item .fa < font-size: 1em; >.map-responsive < margin-top: 15px; >#main-header .port-item .item-label < display: none; >> 

How to remove undesired object text (dot) is displaying on my website, Actually, you better apply a class to that ul and only apply that rule to that class in order to not affect other ul s. (see my edited snippet..

Источник

Remove Empty Paragraph With CSS

How to remove an empty paragraph with a single line of CSS or basic jQuery Code.

Empty paragraphs between tags can be a real nuisance in your code as they add empty white space. There are a number of jQuery methods to remove empty paragraph tags such as:-

But there’s a much simpler way to remove empty tags with CSS Only

Simply add the following CSS to your styles:-

Bang the empty paragraphs are gone!

Remove Empty Paragraph With CSS Demo

The next evolution of team productivity and collaboration is here. Unlock the next generation of productivity with the infinite possibilities of ClickUp 3.0.

Be more productive with apps, tidy tabs, multi-account sign-in, unified search, flexible workspaces, and more.

Get 35% OFF with the Slick Media Wavebox Promo Code (click promo link bottom-right)

Loom is the fastest way to record quick videos of your screen. It’s easy to use and perfect for hybrid workplaces. FREE & affordable paid plans.

BEE FREE and create gorgeous, responsive emails in minutes. BEE PRO and design emails & landing pages really fast. No Code required!

1Password is the easiest way to store and share logins, strong passwords, credit cards and more. With 1Password, you need to memorise one password!

Take advantage of the Slick Media 1Password promotion and get a unique 50% 1Password discount simply by clicking the link.

This content may contain links to carefully selected partner(s) for which we may receive a commission for signups.

Источник

Element: remove() method

The Element.remove() method removes the element from the DOM.

Syntax

Parameters

Return value

Examples

Using remove()

div id="div-01">Here is div-01div> div id="div-02">Here is div-02div> div id="div-03">Here is div-03div> 

const element = document.getElementById("div-02"); element.remove(); // Removes the div with the 'div-02' id 

Element.remove() is unscopable

The remove() method is not scoped into the with statement. See Symbol.unscopables for more information.

with (node)  remove(); > // ReferenceError: remove is not defined 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник