Hide HTML with jquery

Question

I have html written on a page like this that I can not control and I can only get access to it using jquery, which I need your help to solve.

<span class="breadcrumb">
<a href="http://www.example.com" class="breadcrumb"></a>Home / 
<a href="http://www.example.com" class="breadcrumb">Home</a> / 
</span>

I would like to hide only the "Home /" text from the first line that has the empty link. This issue is the text is not wrapped in the link, but is plain text.

But I want to keep the second line visible that contains the link

<a href="http://www.example2.com" class="breadcrumb">Home</a> /

wirey00 · Accepted Answer · 2012-12-21 21:16:40Z

3

You can get the .contents().. then use .slice() to get the text portion that you don't want

$('span.breadcrumb').contents().slice(2,3).remove();

http://jsfiddle.net/3gpgY/

if you want to remove the anchor before the text too, just change the starting index

$('span.breadcrumb').contents().slice(1,3).remove();

http://jsfiddle.net/eK7F7/

answered Dec 21, 2012 at 21:16

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Evan Over a year ago

beautiful. that's what i needed $('span.breadcrumb').contents().slice(1,2).remove();

Jason Whitted · Accepted Answer · 2012-12-21 21:10:19Z

0

Try this:

$(".breadcrumb a:nth-child(2)").prevAll().remove();

answered Dec 21, 2012 at 21:10

Jason Whitted

4,0141 gold badge18 silver badges16 bronze badges

Comments

Cyril F · Accepted Answer · 2012-12-21 21:16:04Z

0

Do the following :

var content = $('.breadcrumb a').eq(1);
$('.breadcrumb').eq(0).html(content);

You can see the result here : http://codepen.io/joe/pen/uoeIh

edited Dec 21, 2012 at 21:16

answered Dec 21, 2012 at 21:11

Cyril F

1,9022 gold badges19 silver badges39 bronze badges

Comments

bukart · Accepted Answer · 2012-12-21 21:19:06Z

0

Here's a dirty solution

 $( '.breadcrumb' ).html( $( '.breadcrumb' ).html().replace( /[^\n]*><\/a>[^\n]*\n/, '' ) );

if you want to do it with the DOM nodes you've to use $.( '.breadcrumb' ).contents()

answered Dec 21, 2012 at 21:19

bukart

4,9162 gold badges23 silver badges40 bronze badges

Comments

karacas · Accepted Answer · 2012-12-21 21:24:24Z

0

Try this:

$(document).ready(function() {
    var newCont = $('<span>')
    $('.breadcrumb a').each(function (){
        $(newCont).append($(this).html())
    })
    $('.breadcrumb').html(newCont)
})

jsFiddle: http://jsfiddle.net/hA6gf/2/

answered Dec 21, 2012 at 21:24

karacas

2,1321 gold badge19 silver badges29 bronze badges

Collectives™ on Stack Overflow

Hide HTML with jquery

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related