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
Disable Certain Dates from Html5 Datepicker
Make Content Horizontally Scroll Inside a Div
Angular - Show Empty Row by Default in Drop Down List and Disable Button
Next.Js Background-Image CSS Property Cant Load the Image
Displaying Comma Separated String in Angular 6
How to Switch Two Divs in HTML
Are (Non-Void) Self-Closing Tags Valid in Html5
How to Nest a ≪Button≫ Element Inside an ≪A≫ Using Html5
Left Column and Stacked Right Column Using Flexbox Css
How to Disable a Link Using Only Css
How to Disable Viewport Zooming on Mobile Safari
How to Properly Escape Quotes Inside HTML Attributes
How to Disable Hover Effect for Active Link
Whatsapp Use Only HTML to Share Url Link by a Descriptive Text
How to Disable Browser Autocomplete on Web Form Field/Input Tags