Deploying jQuery content

Question

In CMS, I am working on a blog. The HTML output structure for each message header is as follows:

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

What I want to do is remove the <a> tag, which wraps the content representing the name of the blog.

I looked around a bit and found 2 near-solutions:

• remove() - this will remove the content itself, although
• unwrap() - I don’t think you can aim the text inside the tag on this to get rid of the tag itself.

Answer 1

First use .wrapInner and expand the new structure.

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

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

---

Update with the best way.

Use .contents() to target text nodes and use .unwrap() for them.

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

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

Answer 2

This will be achieved much more efficiently by editing the appropriate template in the CMS. But you can accomplish this with the following.

 $(document).ready(function() { $('h2').each(function() { $(this).html($(this).children().html()); }); }); 

See this JSFiddle example .

Answer 3

You can use remove() , but first you need to take the text. So something like this

 var title = $('h2 a').text(); //grab the text from the a href $('h2').remove('a'); //remove the link $('h2').html(title); //add the title back to the h2 

Example: http://jsfiddle.net/qzHsb/