How to remove wrapper element but keep the text content intact using jQuery
Topic: JavaScript / jQueryPrev|Next
Answer: Use the jQuery unwrap() method
Sometime you might require to remove the wrapper or parent element, a typical example is removing the anchor tag around the text. With jQuery unwrap() method you can easily remove the wrapper element and keep the inner HTML or text content intact.
Let's check out an example to understand how this method basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Remove Wrapper Element</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").find("a.link").contents().unwrap();
});
});
</script>
</head>
<body>
<p>If you click the following button it will remove the anchor tag from <a href="#" class="link">this link</a> but keep the text content intact.</p>
<button type="button">Remove Link</button>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
