Use jQuery to remove a <p> with an empty <span> tag

I'm working on a Wordpress build using the Tubepress plug-in. This plug-in inserts an unwanted <p> above the video content. I'd like to remove this tag using jQuery.

Here's the code I'd like to remove:

<p><span id="more-76"></span></p>

The span id is开发者_Go百科 auto-generated and will be different for each piece of content. This code is placed in the following div.

<div class="work1alt">
   <p><span id="more-76"></span></p>
</div>

Thanks in advance for help.

Like this:

$('span:empty:only-child').parent('p').remove();

This will be extremely fast, but will not select <span>s with whitespace in them.

$('div.work1alt').find('p span:empty').parent().remove();

The first if condition checks if there is no children or content I believe. The second checks if the span contains empty text and will return only text within the span, but not it's children.

Not as elegant and probably not as fast as slak's solution, but is very explicit.

 $('div.work1alt > p span').each(function(){
    if($.trim($(this).text()) === ""){
       $(this).parent().remove();
    }
 });

EDIT: forgot to put the '===""' in the ifs (doh!)

depends on what else stands on your page. Maybe you should try this like that $('p').remove();