Как удалить блочный элемент div оставив содержимое?

Question

[abuki]

Есть следующий код:

<div class="images_holder">
<div class="images_while">
<div class="inl">
<a href="https://сайт.ru/wp-content/uploads/2019/08/2-153.jpg"><img class="aligncenter wp-image-98740 size-full" src="https://сайт.ru/wp-content/uploads/2019/08/2-153.jpg" alt="" width="620" height="349"></a>
</div>
<div class="inl">
<a href="https://сайт.ru/wp-content/uploads/2019/08/3-152.jpg"><img class="aligncenter wp-image-98741 size-full" src="https://сайт.ru/wp-content/uploads/2019/08/3-152.jpg" alt="" width="620" height="349"></a>
</div>
</div>	
</div>

Как сделать так чтобы блочный элемент <div class="inl"></div> удалился, оставив содержимое.

Итоговый результат должен выглядит следующим образом:

<div class="images_holder">
<div class="images_while">

<a href="https://сайт.ru/wp-content/uploads/2019/08/2-153.jpg"><img class="aligncenter wp-image-98740 size-full" src="https://сайт.ru/wp-content/uploads/2019/08/2-153.jpg" alt="" width="620" height="349"></a>

<a href="https://сайт.ru/wp-content/uploads/2019/08/3-152.jpg"><img class="aligncenter wp-image-98741 size-full" src="https://сайт.ru/wp-content/uploads/2019/08/3-152.jpg" alt="" width="620" height="349"></a>

</div>	
</div>

Answer 1

[profesor08]

Если надо сохранить функционал, внутренних элементов, то клонирование не подходит, надо работать напрямую со ссылками на ноды и перемещать их куда надо.

const extractNodesFrom = selector => {
  [...document.querySelectorAll(selector)].forEach(inl => {
    const parent = inl.parentNode;
    [...inl.children].forEach(child => {
      parent.appendChild(child);
    });

    parent.removeChild(inl);
  });
};

extractNodesFrom(".inl");

Answer 2

[Andrey Vasilev]

$('.images_while a').clone().appendTo(".images_while");
$('.inl').remove();