Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript [Solved] jQuery Removing One Word of Text

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #149442
    LegacyP7
    Participant

    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!

    #149445
    Senff
    Participant

    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

    #149480
    Paulie_D
    Member

    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;
    }
    
    #149513
    TheDoc
    Member

    @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

    #149516
    Paulie_D
    Member

    @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.

    #149538
    LegacyP7
    Participant

    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.

    #149545
    TheDoc
    Member

    As forth, your responses wouldn’t work.

    My response would definitely work.

    #149554
    Senff
    Participant

    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

    #149661
    TheDoc
    Member

    @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.

    #149668
    LegacyP7
    Participant

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

    I was trying to overcomplicate things with jQuery!

    #149736
    Senff
    Participant

    @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.

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.