jquery删除一个元素,但保留里面的元素

删除元素/内容

如需删除元素和内容,一般可使用以下两个 jQuery 方法:

  • remove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素

但是如果我想删除这个元素,但是又想保留里面的元素呢?

比如下面的示例:
只删除.card-block元素,它里面的都保留,应该怎么做呢?

 
<div class="card-block">
    <div class="row">
        <div class="col-6">苹果</div>
        <div class="col-6">香蕉</div>
    </div>
</div>
<div class="card-block">
    <div class="row">
        <div class="col-6">番茄</div>
        <div class="col-6">土豆</div>
    </div>
    <div class="row">
        <div class="col-6">梨</div>
        <div class="col-6">桃子</div>
    </div>
</div>



div class="card-block">
    <div class="row">
        <div class="col-6">苹果</div>
        <div class="col-6">香蕉</div>
    </div>
</div>
<div class="card-block">
    <div class="row">
        <div class="col-6">番茄</div>
        <div class="col-6">土豆</div>
    </div>
    <div class="row">
        <div class="col-6">梨</div>
        <div class="col-6">桃子</div>
    </div>
</div>



<script>
    $('.card-block').each(function(){
        // 先获取内部元素
        var _dom = $(this).html();

        $(this).after(_dom).remove();
    });
</script>

经测试,是可以的。 主要使用after

posted @ 2018-03-29 16:33  SophiaLiu  阅读(1942)  评论(0编辑  收藏  举报