Remove parent or child element on page load using jquery [duplicate]

Question

This question already has answers here:

jQuery : remove element except inside element (4 answers)

Closed 9 years ago.

I want to remove the anchor element surrounding a block of code upon page load.

When the page loads, I want this code:

<h3 class="ms-standardheader ms-WPTitle" style="text-align: justify;">
<a accesskey="W" href="#">
<nobr>
<span>Employee Announcements</span>
<span id="WebPartCaptionWPQ3"></span>
</nobr>
</a>
</h3>

To turn into this code:

<h3 class="ms-standardheader ms-WPTitle" style="text-align: justify;">
<nobr>
<span>Employee Announcements</span>
<span id="WebPartCaptionWPQ3"></span>
</nobr>
</h3>

I have tried to get this working using unwrap but I am still struggling because I want to leave the surrounding nobr elements.

Answer 1

jQuery has an .unwrap() function that removes an element's parent.

http://api.jquery.com/unwrap/

example:

$(function() {
   $('#WebPartCaptionWPQ3').unwrap();
});

Answer 2

$(function() {
    var target = $('a[accesskey="W"]');
    var keep = target.children();
    target.replaceWith(keep);
});