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

  337 views   6 months 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
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 harsukh21@gmail.com

Related Articles