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)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
expected / goal
<div id="container">
<div id="wrapper" class="slider">
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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());