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());
You can use querySelectorAll to find all div blocks:
let container = document.getElementById("wrapper");
container.querySelectorAll("div").forEach(e => e.remove());
Note: I haven't tested this on a document with nested divs. Since then one div could get deleted before it is iterated in the loop it may cause problems. And additional check or repeating querySelectorAll until none are found should solve that problem.