Search

How to remove wrapper element but keep the text content intact using jQuery

post-title

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:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Remove Wrapper Element</title>
<script src="https://code.jquery.com/jquery-1.12.4.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>