Remove Empty elements with jQuery

Question

Hi,

Is there a way to remove this

<p> </p>

using jQuery?

Thank you for your help in advance!

Answer 1

Try:

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

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

Answer 2

give it an id (to get the selector).

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


<script>

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

</script>

Answer 3

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.

Answer 4

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()