Marty Marty - 7 months ago 28
Javascript Question

JQuery unwrap content

Within a CMS I am working on a blog. The HTML structure of the output for each post title looks like this:

<h2>
<a href="...">Title</a>
</h2>


What I want to do is remove the
<a>
tag that wraps the content representing the blog title.

I did a bit of looking around and found 2 almost-solutions:


  1. remove()
    - this will remove the content itself too though

  2. unwrap()
    - I don't think you can target text within a tag with this to get rid of the tag itself.


Answer

Use .wrapInner first and unwrap the new structure..

$('h2 a').wrapInner('<span>').children().unwrap();

Demo at http://jsfiddle.net/gaby/ffKDn/


Updating with a better way ..

Use the .contents() to target the text nodes and use .unwrap() on those..

$('h2 a').contents().unwrap();

Demo at http://jsfiddle.net/gaby/ffKDn/8/