How to remove only the parent element, without also remove child elements with jQuery. Having this structure for example:
<a href="#">
<p>A</p>
<p>B</p>
<p>C</p>
</a>
With the intention of removing the parent (), after the function the structure would look like this:
<p>A</p>
<p>B</p>
<p>C</p>
Use the unwrap() function in jQuery.
For test purposes I have created a button that simulates.
$('.ativar').on('click', function(){
if($('p').parent().is('a'))
$('p').unwrap();
else
$('p').wrap('<a href="#"></a>');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ahref="#">
<p>A</p>
<p>B</p>
<p>C</p>
</a>
<button class="ativar">Ativar/Desativar</button>Another alternative would be to take the content and give a replace:
var children = $("a").contents();
$("a").replaceWith(children);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ahref="#">
<p>A</p>
<p>B</p>
<p>C</p>
</a>