DOM包裹unwrap()方法

最新推荐文章于 2022-09-30 14:59:46 发布

qq_37036642

最新推荐文章于 2022-09-30 14:59:46 发布

阅读量519

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/qq_37036642/article/details/76652379

版权

Jquery 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

DOM包裹unwrap()方法

我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反，如果删除选中元素的父元素要如何处理 ?

jQuery提供了一个unwrap()方法，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

看一段简单案例：

<div>
    <p>p元素</p>
</div>

我要删除这段代码中的div，一般常规的方法会直接通过remove或者empty方法

$('div').remove();

但是如果我还要保留内部元素p，这样就意味着需要多做很多处理，步骤相对要麻烦很多，为了更便捷，jQuery提供了unwrap方法很方便的处理了这个问题

$('p').unwrap();

找到p元素，然后调用unwrap方法，这样只会删除父辈div元素了

结果：

<p>p元素</p>

<!DOCTYPE html>
<html>


<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style>
    .left,
    .right {
        width: 250px;
        height: 120px;
    }
    
    .left div,
    .right div {
        width: 100px;
        height: 120px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    p {
        border: 1px solid red;
    }
    
    a {
        border: 1px solid blue;
    }
    </style>
</head>




<body>
    <h2>DOM包裹unwrap()方法</h2>
    <div class="left">
        <div class="aaron1">点击,通过unwrap方法给p元素删除父容器div</div>
        <div class="aaron2">点击,通过unwrap的回调方法给a元素删除父容器div</div>
    </div>
    <div class="right">
        <div>
            <p>p元素</p>
        </div>
        <div>
            <p>p元素</p>
        </div>
    </div>
    <div class="left">
        <div>
            <a>a元素</a>
        </div>
        <div>
            <a>a元素</a>
        </div>
    </div>
    <script type="text/javascript">
    $(".aaron1").on('click', function() {
        //找到所有p元素，删除父容器div
        $('p').unwrap('<div></div>')
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on('click', function() {
        //找到所有p元素，删除父容器div
        $('a').unwrap(function() {
            return '<div></div>';
        })
    })
    </script>
</body>


</html>

qq_37036642

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM包裹unwrap()方法

DOM包裹unwrap()方法我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反，如果删除选中元素的父元素要如何处理 ?jQuery提供了一个unwrap()方法，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。看一段简单案例： p元素我要删除这段代码中的div，一般常
复制链接

扫一扫