Jak usunąć element ze strony?

Cześć,

tym razem nie z tworzeniem, a z usuwaniem elementów ze strony mam problem. Załóżmy, że body naszej strony wygląda tak:

<div id="container">
	<div class="circle"</div>
	<div class="circle"</div>
	<div class="circle"</div>
	<div class="circle"</div>
</div>

Teraz chce aby divy "circle" były usuwane za pomocą przycisku jeden po drugim. Stworzyłem takie coś w JS, lecz za każdym razem usuwany jest tylko jeden div - nie wiem dlaczego. Oto co zrobiłem:
https://jsfiddle.net/y5jzoyy4/1/

Proszę wejść w link i dodać parę divów "circle" za pomocą przycisku DODAJ, a następnie spróbować usunąć te divy. Niestety zostanie usunięty tylko jeden div :(

Ok, problem jest taki:
Masz sobie zmienną circle, tworząc nowy element przypisujesz do niej wartość wskazującą na nowo utworzony element. Ponieważ nie użyłeś słówka var przed circle, została ona dodana do globalnego scopa, tzn. jest dostępna w całej aplikacji. Teraz klikając w przycisk, usuwasz element na który wskazuje ta zmienna. Dlatego też gdy klikasz drugi raz na ten sam przycisk, zmienna wciąż wskazuje na stare, poprzednio usunięte kółko.

Jak to naprawić?
Najprościej skorzystać z metody getElementsByClassName, zwróci tablicę elementów o podanej nazwie klasy. Wybrać z niej jeden, interesujący nas element(chyba najlepiej ostatni) i go usunąć.

Dodatkowo w linii #8 zrobić:

var circle = document.createElement("div");

W ten sposób dostęp do zmiennej zostanie ograniczony do tej funkcji, co uniemożliwi jej odczyt(i modyfikację) innym funkcjom. Głównie po to aby ustrzec się od błędów, ale również po to by ograniczyć zużycie pamięci(zmienna ta zostanie usunięta po wyjściu z funkcji, tutaj nie robi to dużej różnicy, ale jak miałbyś jakieś duże struktury to zrobiłby się problem). Warto doczytać o "use strict"; które wyłapało by samo z siebie ten błąd.

Z jQuery: $("#container .circle").last().remove();.

Dziękuję za pomoc, faktycznie zapomniałem dodać słowa var przed circle :( Dopiero zacząłem uczyć się JS, stąd takie problemy.

Jeżeli getElementsByClassName, zwróci tablicę elementów o podanej nazwie klasy, to taki kod:
var circle = getElementsByClassName("circle");

oznacza, że zmienna circle jest tablicą, tak?

Zatem jak wskazać na jej ostatni element?

http://www.w3schools.com/jsref/jsref_length_array.asp

Doszedłem do takiej wersji:

function wyczysc() {
	var circle = getElementsByClassName("circle");
	var size = circle.length;
	container.removeChild(circle[size-1]);
}

Lecz w konsoli nadal wyskakuje błąd:
getElementsByClassName is not defined

Spróbuj:

 var circle = document.getElementsByClassName("circle");

Ehhh, no oczywiście, pomogło :D Dziękuję bardzo za pomoc. Z jakiegoś powodu nie dodałem document. przed metodę... :) "geniusz".

Jeszcze raz dziękuję, teraz wszystko działa :)