Strip specific tag from parent (jQuery)

Question

HTML:

<div class="featured">
    <h4><a href="#">Title 1</a></h4>
    <a href="#"><img src="image.png" class="image"/></a>
    <p><a href="#"></a><br />
    Description goes here</p>
</div>

<div class="featured">
    <h4><a href="#">Title 2</a></h4>
    <a href="#"><img src="image.png" class="image"/></a>
    <p><a href="#"></a></p>
    <p>Description goes here</p>
</div>

.. How do I strip out all <p> tags from .featured?

Thanks

Answer 1

$(".featured p").remove();

This works by changing each <p> to <span>. It does that in-place, so the <p>s don't have to be at the end (no append - it will not reorder the elements):

$(".featured p").replaceWith(function(){
     return $('<span />').html( $(this).html() );
});

It is using html, so the element will lose data and event bindings.

Answer 2

Something like this?

$(".featured p").each(
  function(){
    $(this).after($(this).html()).remove();
});

Edit 2: Tested, works. nice and simple.

Answer 3

This works, but only because your paragraph elements are at the end of your divs:

$(".featured p").each(function(){
    var content = $(this).html();
    $(this).parent().append(content);
    $(this).remove();
});

Answer 4

With jQuery 1.4 you could do it like this:

$(".featured p *").unwrap();
$(".featured p").each(function(){
  $(this).replaceWith("<span>"+ $(this).text() + "</span>")
});

Test it here

Text nodes don't get unwraped, so you have to do them separately. I'm not sure why replaceWith requires them to be inside tags.

Answer 5

Check out Ben Alman's unwrap "plugin"

$.fn.unwrap = function() {
  this.parent(':not(body)')
    .each(function(){
      $(this).replaceWith( this.childNodes );
    });

  return this;
};

your usage would be:

$(".featured p > *").unwrap();