Question

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 1

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/