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

3124 views 2 years ago jQuery

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>

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]