Q:

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

mhmadesk
Save to bookmark
|
2022-05-18
|
  261 
Very Easy
0

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

JQUERY,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-18
need an explanation for this answer? contact us directly to get an explanation for this 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:

<!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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

JavaScript / jQuery Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to animate a div height based on the content u... >>
<< How to set the height of a div element dynamically...