jQuery DOM operation unwrap() method

We can add a wrapped parent element to the selected element through the wrap method. On the contrary, what should be done if the parent element of the selected element is deleted?

jQuery provides an unwarp() method, which is opposite to the wrap method. Removes the parent element from the set of matching elements, leaving itself (and siblings, if present) in their original positions.

Let’s write an example below:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div>
        <p>元素</p>
    </div>

    <script>
        $("p").unwrap("<div></div>");
    </script>
</body>
</html>

Friends can run it locally, and then press F12 in the browser to debug, or use the shortcut key ctrl+shift+i, you can See that the div tag we started writing has been deleted

Please note that we have used the remove or empty method to delete before. This will delete all the elements in it, while the unwrap method only deletes the parent node, but does not delete the child nodes. This method is relatively simple. You can refer to the above case

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div> <p>元素</p> </div> <script> $("p").unwrap("<div></div>"); </script> </body> </html>

submit Reset Code

Automatic operation

jQuery DOM operation unwrap() method

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]