Removing an element after a div with Jquery

G

3

16

I would like to remove the p tag that directly follows a div using jquery. Here is my HTML:

<div class="fbcommentbox"></div>
<p>Powered by <a href="http://pleer.co.uk/wordpress/plugins/facebook-comments/">Facebook Comments</a></p>

So in this case, all content inside the <p> tags will be set to display:none.

This seems like it would be VERY simple to do in jquery but I cannot seem to put my finger on it. Any help would be great. Thanks!

General answered 27/6, 2011 at 18:8 Comment(0)

J

33

$('div.fbcommentbox + p').hide();

hide() sets display: none.
remove() removes the element from the DOM.

Pick the one you need.

Jeminah answered 27/6, 2011 at 18:10 Comment(4)

@Tomalak, can you explain why next() is undesirable? :-) – Hinojosa 27/6, 2011 at 18:18

@Ben: It's not undesirable as such, but it is slower than the selector (because with this selector, jQuery can make use of querySelectorAll which is supported natively by modern browsers). The actual difference is probably negligible in this case, but it's useful to bear that in mind for more complex scenarios. – Vertigo 27/6, 2011 at 18:21

For the fun of it I did this performance check between + and .next(), looks like next is quicker which might make a difference if (for some readon) you've got to traverse the DOM from within a loop. jsperf.com/jquery-next-vs-plus – Hinojosa 27/6, 2011 at 18:31

i tried onclick $(this + 'p').remove() and this deletes all the <p> elements next to myclass.. so i used $(this).next('p').remove() to remove only the one that follows myclass. Just in case someone needs the same functionality... – Spat 11/12, 2014 at 10:40

H

34

This should work:

$('.fbcommentbox').next('p').remove();

We select the div, then use next to get the next element.

Hinojosa answered 27/6, 2011 at 18:9 Comment(1)

Maybe .next('p') would be even cleaner. – Margaretemargaretha 27/6, 2011 at 18:13

J

33

$('div.fbcommentbox + p').hide();

hide() sets display: none.
remove() removes the element from the DOM.

Pick the one you need.

Jeminah answered 27/6, 2011 at 18:10 Comment(4)

@Tomalak, can you explain why next() is undesirable? :-) – Hinojosa 27/6, 2011 at 18:18

@Ben: It's not undesirable as such, but it is slower than the selector (because with this selector, jQuery can make use of querySelectorAll which is supported natively by modern browsers). The actual difference is probably negligible in this case, but it's useful to bear that in mind for more complex scenarios. – Vertigo 27/6, 2011 at 18:21

For the fun of it I did this performance check between + and .next(), looks like next is quicker which might make a difference if (for some readon) you've got to traverse the DOM from within a loop. jsperf.com/jquery-next-vs-plus – Hinojosa 27/6, 2011 at 18:31

i tried onclick $(this + 'p').remove() and this deletes all the <p> elements next to myclass.. so i used $(this).next('p').remove() to remove only the one that follows myclass. Just in case someone needs the same functionality... – Spat 11/12, 2014 at 10:40

S

1

$('.fbcommentbox').next().hide(); or $('.fbcommentbox').css('display','none').

Seeress answered 27/6, 2011 at 18:12 Comment(0)

Recommended topics

Hot tags