Delete only div containers inside a container

The aim is to delete all div containers within a container and leave two anhchor tags untouched.

<div id="container">
  <div id="wrapper" class="slider">

    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>

    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

  </div>
</div>

expected / goal

<div id="container">
  <div id="wrapper" class="slider">
    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

  </div>
</div>

With innerHTML everything is deleted and therefore also the a tags. Is there an elegant and simple solution?


Use the remove method to remove an element from the DOM.

document.querySelectorAll("#wrapper > div").forEach(el => el.remove());