首页 > 解决方案 > 使用 jquery 删除 div 元素而不删除其中的任何内容

问题描述

<div class="1">
  <div class="2">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
</div>

如何class="2"仅删除 div?我需要保留 div 1 和 ul 和 li。

结果:

<div class="1">      
  <ul><li>Item 1</li><li>Item 2</li></ul>
</div>

或者

<div class="1">
  <!--<div class="2">-->
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  <!--</div>-->
</div>

标签: javascriptjqueryhtml

解决方案


您需要使用.unwrap()它删除元素的父母但保留自我。

$(".2 > ul").unwrap();

$(".2 > ul").unwrap();
console.log($(".1")[0].outerHTML);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
  <div class="2">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
</div>


推荐阅读