Usuwanie wszystkich divów

Question

https://codepen.io/diana-larussa/pen/RwGMxqL

Przy zmianie grida w ''choose a grid'' zamiast pojawiania się nowego ułożenia divów, stare ułożenie 'dokłada' się do nowego. Próbowałam coś w tym stylu ale chyba nie tędy droga  Jak to rozwiązać?

        let allDivs = document.querySelectorAll("div")

        for (let index = 0; index < allDivs; index++) {
            allDivs.remove()
        }

 

Answer 1

allDivs to lista, dobrze próbowałaś

let allDivs = document.querySelectorAll("div")
 
for (let index = allDivs.length - 1; index >= 0; index--) {
    allDivs[index].remove()
}

 

 

Comments

A, to dobrze wiedzieć 

Answer 2

Musisz zresetować (usunąć) zawartość container przed załadowaniem nowego układu.

Comments

Hm, to ma w sumie większy sens. A zrobię to za pomocą jakiej metody?

---

Najprościej to za pomocą

innetHTML

Ale to niepolecana metoda ze względu na bezpieczeństwo kodu, wiec lepiej użyć jakieś petli po dzieciach kontenera

np:

      const item = document.querySelector('.container')
      while (item.firstChild) {
      item.removeChild(item.firstChild)
      }

Wystarczy dodać na początku funkcji 

function newGrid() {
...
}

 

---

Zadziałało, dziękuję baardzo!