El objetivo es eliminar todos los contenedores div dentro de un contenedor y dejar intactas dos etiquetas anhchor.
<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>esperado / objetivo
<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>Con innerHTML todo se elimina y, por lo tanto, también las etiquetas a. ¿Hay una solución elegante y simple?
Puede usar querySelectorAll para encontrar todos los bloques div:
let container = document.getElementById("wrapper"); container.querySelectorAll("div").forEach(e => e.remove());Nota: no he probado esto en un documento con divs anidados. Desde entonces, un div podría eliminarse antes de que se itere en el bucle, lo que puede causar problemas. Y una verificación adicional o repetir querySelectorAll hasta que no se encuentre ninguno debería resolver ese problema.