21

Is there a way to remove this

<p> </p>

using jQuery?

1
  • Question: do you control the generated source? If so, have you considered not generating empty tags? Commented Sep 17, 2012 at 10:45

8 Answers 8

47

Try:

$('p')
    .filter(function() {
        return $.trim($(this).text()) === '' && $(this).children().length == 0
    })
    .remove()

What that does is it finds all the <p>s that have nothing in them, and removes them from the DOM.

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

5 Comments

nice filter. This will remove all empty <p> tags
Be warned this will also remove <p><img src="..."></p>
Although this is a good start, I've downvoted this answer for the reason given above by Greg.
@Greg return $.trim($(this).text()) === '' && $(this).children().length == 0 will work then.
I've included a solution below that is generic and slightly faster than using $(this).children().length.
15

As Greg mentions above, testing the trimmed .text() will remove paragraphs w/ no text, but do have a self-contained element like the <img> tag. To avoid, trim the .html() return. As text is considered a child element in the DOM, you'll be set.

$("p").filter( function() {
    return $.trim($(this).html()) == '';
}).remove()

Comments

3

This could be a better solution for CMSs. Some rich text editors add &nbsp; inside empty paragraphs.

    $("p").filter( function() {

        var html = $(this).html();

        if(html == '' || html == '&nbsp;')
            return true;

    }).addClass('emptyP');

Comments

2

Probably same answer as here, try to do this on code behind.

With jquery i'll use this:

$("p:empty").remove();

Also you could use .empty(), that will remove all child nodes from the set of matched elements.

2 Comments

This won't remove <p> </p> as that does not match the :empty selector.
In this case you can go just via css with: p:empty { display: none; }
1
$("p").filter( function() {
            return $.trim($(this).html()) == '';
        }).remove()

I used this to remove empty paragraph that contains not element such as IMG, Input, Select, etc.

Comments

0

If you are trying to simply remove all empty P elements, or P's with only a single space, then you could do this:

$('p').map( function(){
  var html = $(this).html();
  if( !html.length || html == ' ' || html == String.fromCharCode(255) )
    return this;
}).remove();

This iterates through all of the P's on your page and if they match a certain criteria (they are empty or only have a whitespace) then it removes them from the DOM.

Also, by assigning our html content once to a local variable, it helps the script run faster. To look for non-breaking spaces I simply compare the contents to a string created from ASCII character code 255 (which is a non-breaking space).

jQuery's map() function can be great when a simple filter, or attribute comparison will not suffice.

You can read more about it here.... http://api.jquery.com/map/

Comments

-1

This should handle any element with no children of any type (including unwrapped text nodes).

$("p").filter(function() { 
  return !this.childNodes[0]
}).remove();

2 Comments

This won't remove <p> </p>, not sure if that was your intent.
Ouch. It does everything but answer the OP's question. That was definitely not my intent. Please downvote me.
-4

give it an id (to get the selector).

<p id="myP"></p>


<script>

$("#myP").remove();

</script>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.