Remove div element without removing anything inside it using jquery

Question

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

How do I remove div class="2" only? I need to keep div 1 and ul and li.

Result:

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

or

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

Answer 1

You need to use .unwrap() that remove the parents of element but keep self.

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