Solution 1 :

First of all you if you want to clear the page I recommend you to use a main div or section with an unique ID

<section id="main">
    <div id="mySections" class="row"> </div>
</section>

So then you append or remove your content here if I understood you want 4 sections you can use bootstrap or your own css classes to do that example in bootstrap:

(function (){
function ShowAllImages() {
  clear();
  addImages();
}
function clear() {
    let parent = document.getElementById('main');
    let child = document.getElementById('mySections');
    parent.removeChild(child);
}
function addImages () {
    let parent = document.getElementById('main');
    let child1 = document.createElement('div');
    child1.classList.add('col-md-3');
    let child2 = document.createElement('div');
    child2.classList.add('col-md-3');
    let child3 = document.createElement('div');
    child3.classList.add('col-md-3');
    let child4 = document.createElement('div');
    child4.classList.add('col-md-3');

    // then you can add your images in each section with

    let img1 = document.createElement('img');
    child1.appendChild(img1);

    // ... 
    parent.appendChild(child1);
    parent.appendChild(child2);
    parent.appendChild(child3);
    parent.appendChild(child4);
}
}())

I don't know how you obtain the images but hope it helps, of course you can improve this.