Błąd w usuwaniu divów z flexboxa

Question

Witam,

Robię projekt gry w kamień-papier-nożyce i w divie o klasie narzucającej display: flex; mam umieszczone 3 divy: 

 <div class="flex-box-container-1">

                <div>
                    <img id = "rock" src="img/kam.png" onclick="newGame(this)">
                </div>

                <div>
                    <img id = "scissors" src="img/scissors.png" onclick="newGame(this)">
                </div>

                <div>
                    <img id = "paper" src="img/paper.png" onclick="newGame(this)">
                </div>

            </div>

Po kliknięciu w dany obrazek wykonuje się funkcja, która zawiera linijki:

 document.getElementById('rock').remove();
 document.getElementById('paper').remove();
 document.getElementById('scissors').remove();

W miejsce powyższego wklejam potem trzy inne divy z użyciem appendChild. Co dziwne, po wykonaniu powyższych trzech linijek kod HTML wspomnianiego diva wygląda następująco:

 <div class="flex-box-container-1">
                <div </div>
                <div></div>
                <div></div>
 </div>

Metoda remove() z jakiegoś powodu nie zdejmuje z flexboxa divów, a jedynie ich atrybuty i zawartość. Czy ktoś mógłby doradzić, dlaczego tak to wygląda?

Pozdrawiam.

Answer 1

Wszystko działa jak trzeba :)

Jeśli masz element <img> o id rock to po wykonaniu remove() element <img> zostanie usunięty. Natomiast div w którym siedział już nie. Nadaj ten id dla diva który jest wrapperem obrazka.

Comments

Ech, akurat zauważyłem błąd w chwili publikacji posta, liczyłem, że nikt się nie zorientuje :P. Dzięki za pomoc :)