How to Remove Specific Text With CSS

How to remove specific text with CSS

Use code bellow:

:nth-last-of-type(-n+2) mean 2 last element...

display:none; remove them

section span:nth-last-of-type(-n+2){display:none;}
<h1 class='av-special-heading-tag'  itemprop="headline"  >Turning </h1><div class='special-heading-border'><div class='special-heading-inner-border' ></div></div></div><span class="av_font_icon avia_animate_when_visible av-icon-style-  av-no-color avia-icon-pos-center " style=""><span class='av-icon-char' style='font-size:20px;line-height:20px;' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' ></span></span><section class="av_textblock_section"  itemscope="itemscope" itemtype="https://schema.org/CreativeWork" ><div class='avia_textblock '  style='font-size:20px; '  itemprop="text" ><p style="text-align: center;"><span style="color: #641380;">Mazak Nexus 200MY</span><br /><span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br /><span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br /><span style="color: #641380;"> Mazak SQT200M</span><br /><span style="color: #641380;"> Mazak SQT10M</span><br /><span style="color: #641380;"> Mazak Nexus</span><br /><span style="color: #641380;"> Mazak QT10</span><br /><span style="color: #641380;"> Mazak QT10</span><br /><span style="color: #641380;"> Mazak QT8</span><br /><span style="color: #641380;"> Mazak Colchester lathe</span><br /><span style="color: #641380;"> Mazak Harrison lathe</span></p></div></section>

Hide text using css

This is one way:

h1 {
text-indent: -9999px; /* sends the text off-screen */
background-image: url(/the_img.png); /* shows image */
height: 100px; /* be sure to set height & width */
width: 600px;
white-space: nowrap; /* because only the first line is indented */
}

h1 a {
outline: none; /* prevents dotted line when link is active */
}

Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create:

h1 {
background-image: url(/the_img.png); /* shows image */
height: 100px; /* be sure to set height & width */
width: 600px;

/* Hide the text. */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Remove Text In div

See Hide text node in element, but not children
You can set the visibility style to "hidden" for the element and override it for the children.

#SortOptions{
visibility: hidden;
}
#SortOptions select{
visibility: visible;
}

See https://jsfiddle.net/3u5zs5rj/

How to remove string that dosn't have an html tag using CSS

Maybe you can use font-size ::

.A {  font-size: 0;}.A a {  font-size: 20px;}
<div class="A">  <a href="#" class="link">keep this</a> and i want to remove this</div>

Hide specific text using just CSS?

I have achieved this in a different way using position relative and asbolute. Look at my code. But you have sure about the proper text size and height.

#incomeforecast div{position:relative;}
#incomeforecast div span:last-child
{
height:35px;
margin-top:-30px;
display:block;
background-color:#fff;
position:absolute;
bottom:0px;
left:0;
right:0;
}
<div id="incomeforecast">
<div style="float:left;margin:10px 0 10px 0;width:100%;text-align:center;">
<span class="textred"><b>USD Currency</b></span><br>
Monthly: $0.00 USD (0)<br>
Quarterly: $0.00 USD (0)<br>
Semi-Annually: $0.00 USD (0)<br>
Annually: $0.00 USD (0)<br>
Biennially: $0.00 USD (0)<br>
Triennially: $0.00 USD (0)<br>
<span class="textgreen"><b>Est. Annual: $0.00 USD</b></span>
</div>
</div>

How do you remove an li with specific text?

I assume you want to show the login element if the user is not logged in, if they are then you will hide it. Since you have control over the CSS, add a helper class .hide that sets display property to display: none;.

Then when you have a user logged in, you run a conditional in JS to check the textContent of the list-items (children[0]), which will be the a tag. Check the userLoggin status and if both natch add the class. I also added let userLoggedIn = true; as a parameter to the function to check if this is also true or not allowing you to control whether the class is added depending on whether user is logged in or not.

You can query the list-group-item using document.querySelectorAll('#navLinks .list-group-item'); then iterate over the nodeList and use a conditional to search the first childs textContent using item.children[0].textContent === 'Log In', if this conditional returns true then and user is logged in add a css class to hide the element.

const listItems = document.querySelectorAll('#navLinks .list-group-item')
const listItems2 = document.querySelectorAll('#navLinks2 .list-group-item')

function hideItem(el, bool) {
el.forEach(item =>
item.children[0].textContent === 'Log In' && bool === true ?
item.classList.add('hide') :
item.classList.remove('hide')
)
}

let userLoggedIn = true
let userLoggedIn2 = false
hideItem(listItems, userLoggedIn)
hideItem(listItems2, userLoggedIn2)
.hide {
display: none;
}
<h2>user is logged in</h2>
<ul class="nav navbar-nav" id="navLinks">
<li class="list-group-item">
<a href="/">Home</a>
</li>
<li class="list-group-item">
<a href="/postings/search">Search</a>
</li>
<li class="list-group-item">
<a href="/user/new">Create Account</a>
</li>
<li class="list-group-item">
<a href="/login">Log In</a>
</li>
<li class="list-group-item">
<a href="/help">Help</a>
</li>
</ul>
<h2>user is NOT logged in</h2>
<ul class="nav navbar-nav" id="navLinks2">
<li class="list-group-item">
<a href="/">Home</a>
</li>
<li class="list-group-item">
<a href="/postings/search">Search</a>
</li>
<li class="list-group-item">
<a href="/user/new">Create Account</a>
</li>
<li class="list-group-item">
<a href="/login">Log In</a>
</li>
<li class="list-group-item">
<a href="/help">Help</a>
</li>
</ul>

How to remove type=text/css property from string?

I don't know why you want to do that but I guess a simple replace will work :

var styleWithoutAttr = styleTags.replace("type='text/css'", '')

And if you want to handle the possibility of simple or double quotes you can do :

var styleWithoutAttr = styleTags.replace("type=['\"]text/css['\"]", '')


Related Topics



Leave a reply



Submit