[Solved] jQuery Removing One Word of Text

[LegacyP7]

Hello. I’m trying to remove just one word of text from a div.

Here’s the code:

<div> <a href="#">username here</a> posted <span>Aug 23, 13</span> </div>

I want to remove the word “Posted” – as I have applied CSS to the rest, and it is standing out like a sore thumb! (Image: http://puu.sh/4mzfx.png)

Now; I’ve tried this bit of jQuery code – which was what I made up from what I found on Google:

$(".info:contains( posted )").text("");

However, if I use this – everything is removed. The Date, the username and everything. This jQuery is selecting the whole .info class – rather than just the word. How can I select just that word?

Thank you!

[Senff]

I would actually dig in the code to see if I could remove the word from the source code, but if you don’t have access to that, you could do it with just CSS.

Give the whole line a font size of 0, then give tha A and the SPAN a font size of 14px (or anything) so that the zero font size is only applied to the word “posted”. Something like this: http://codepen.io/senff/pen/oCGaq

[Paulie_D]

If I may. the word posted should be wrapped in a text tag such as a <p> or <span>…at the moment it’s just sitting there as (I think) a text node in the HTML.

Because it doesn’t have a text tag it can’t be selected directly with CSS.

Wouldn’t that be better…and more semantic(?) or at least proper HTML anyway?

<div> 
<a href="#">username here</a>
<p class="posted">posted<p>
<span>Aug 23, 13</span>
</div>

p.posted {
display:none;
}

[TheDoc]

@Paulie_D – I don’t think that’s semantic at all since it’s a single sentence.

Really, it’d be <p><a href="#">Username</a> posted on <span class="date">Date</a></p>.

This is certainly not pretty, but if it has to be done via JS you could do this with jQuery:

http://codepen.io/ggilmore/pen/103c948cf7d841dc5eada185a94fd1d7

[Paulie_D]

@The Doc.

You’re probably right…swap out the p for a span and it’s easier/better.

<div> 
<a href="#">username here</a>
<span class="posted">posted</span>
<span>Aug 23, 13</span>
</div>

The important point to me is that all text should be inside some sort of text(like) tag such a p, span, heading or a etc.

[LegacyP7]

This is the exact code. I’ve removed the link though.

<div class="info">
<a href="#" class="#">Joe_Nub</a> posted <span class="date">Aug 23, 13</span>
</div>

I need to just be able to select the word – as it has no tagging, and I’m using Enjin, which is kinda like WordPress, and I cannot directly change up the code.

As forth, your responses wouldn’t work.

[TheDoc]

As forth, your responses wouldn’t work.

My response would definitely work.

[Senff]

So what am I, chopped liver?

With just CSS:

.info {
  font-size:0;
}

.info a, .info span {
  font-size:14px;
  margin-right:5px;
}

Or, if you prefer, with just Javascript/jQuery (using replace()): http://codepen.io/senff/pen/wGuIB

[TheDoc]

@Senff ;)

Actually, when I viewed your solution in Codepen the result was completely blank so I thought it wasn’t working. Looking at it now it appears to be working beautifully.

[LegacyP7]

Oh goodness, how did I not think of the CSS method! Thank you!

I was trying to overcomplicate things with jQuery!

[Senff]

@TheDoc:

Actually, when I viewed your solution in Codepen the result was completely blank so I thought it wasn’t working. Looking at it now it appears to be working beautifully.

That happens to me fairly often as well. Thinking it’s a CodePen quirk.

[Author]

Posts