Javascript - How to replace multiple HTML nodes

I'm building an e-mail constructor and when the user saves the template I just send the HTML to the server. But I need to remove the drap & drop element to send it to the server.

I'm not very good with DOM manipulation so I don't know where to start from.

This is my HTML:

<table>
  <tbody>
    <tr>
      <th>
        <div class="components-drop-area">
          <p>aa</p>
          <p>bb</p>
        </div>
      </th>
    </tr>
    <tr>
      <th>
        <div class="components-drop-area">
          <p>cc</p>
          <p>dd</p>
        </div>
      </th>
    </tr>
  </tbody>
</table>

I need to remove all the .components-drop-area divs. Something like that:

<table>
  <tbody>
    <tr>
      <th>
        <p>aa</p>
        <p>bb</p>
      </th>
    </tr>
    <tr>
      <th>
        <p>cc</p>
        <p>dd</p>
      </th>
    </tr>
  </tbody>
</table>

I stopped my code here:

var table = document.querySelector('table').cloneNode(true)

let dropAreas = table.querySelectorAll('.components-drop-area')

console.log(table, dropAreas)

How can I loop and remove desired elements while retaining their content?

Here's an adaption of James's vanilla JS implementation that should work

for (const node of document.querySelectorAll("table .components-drop-area")) {
  const parent = node.parentNode;
  while (node.children.length>0) {
    let child = node.children[0];
    node.removeChild(child);
    parent.insertBefore(child, node);
  }
  parent.removeChild(node);
}

Looping over the elements is tricky since we're modifying the collection during the iteration

<!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-js -->

for (const node of document.querySelectorAll("table .components-drop-area")) {
  const parent = node.parentNode;
  while (node.children.length>0) {
    let child = node.children[0];
    node.removeChild(child);
    parent.insertBefore(child, node);
  }
  parent.removeChild(node);
}

// The <div> contents have now been extracted, and the <div> elements removed
console.log(document.querySelector('table').innerHTML);

<!-- language: lang-html -->

<table>
  <tbody>
    <tr>
      <th>
        <div class="components-drop-area">
          <p>aa</p>
          <p>bb</p>
        </div>
      </th>
    </tr>
    <tr>
      <th>
        <div class="components-drop-area">
          <p>cc</p>
          <p>dd</p>
        </div>
      </th>
    </tr>
  </tbody>
</table>

<!-- end snippet -->