使用jQuery删除div元素而不删除其中的任何内容

Question

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

如何仅删除div class="2"？我需要保留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>

Answer 1

您需要使用.unwrap()来删除element的父代，但保持自身。

$(".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>