Q:

How do you select and remove an element without removing the contents of the element javascript

I am working with WordPress theme, and there is a loop that pulls posts and creates the links to those posts.  I am trying to remove the a tag but still leave the content in there.  
<div class="members">
 <div class="wrapper">
   <a href="somelink">
     <img />
     <p>mycontent</p>
   </a>
 </div>
</div>

the advice i got was select the a and put it into a variable calling it target. 
Then grab the inner html and add it to another variable called content. 
Finally remove target and put the content back into the wrapper div. 
I been having trouble selecting the a tag since it doesn't have a class and is inside of other divs.    

A:

You can use $.html() to get the contents of the link, insert that content after the link using $.after(), then remove the link with $.remove()

var $link = $('a'),
    stuff = $link.html();
$link.after(stuff).remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="members">
 <div class="wrapper">
   <a href="somelink">
     <img />
     <p>mycontent</p>
   </a>
 </div>
</div>

Or using vanilla JS, just use innerHTML to get the contents of the link and set that as the innerHTML of the wrapper. 

var wrapper = document.getElementsByClassName('wrapper')[0],
    link = wrapper.getElementsByTagName('a')[0];
wrapper.innerHTML = link.innerHTML;
<div class="members">
 <div class="wrapper">
   <a href="somelink">
     <img />
     <p>mycontent</p>
   </a>
 </div>
</div>

