Usuwanie dynamicznie dodawanych elementów - jQuery

Question

Witam wszystkich.

Mam na swojej stronie elementy, które są dodawane dynamicznie przez użytkownika po naciśnięciu TAB kiedy focus jest w ostatnim elemencie.
Jeden element wygląda tak:

<div class=els id=n1>
<div class=number>1</div>
<div class=cancel>DELETE</div>
<input type=text class=things>
<div class=clear></div>
</div>

Po najechaniu na dany element div .number znika i pojawia się .cancel. Chciałbym aby po naciśnięciu diva .cancel usuwał się cały rodzic .els.

Napisałem taki kod:

$('.els').on('click','.cancel', function(){
    $(this).parent().remove();
});

Działa on tylko na pierwsze 3 elementy, które dodawane są od razu po załadowaniu strony. Na nowo stworzone niestety nie działa.

JSFiddle: https://jsfiddle.net/bugs55/1rzwa3y8/37/

Z góry dziękuję za pomoc! :)

Answer 1

Zamiast $('.els') napisz $(document) powinno działać też dla nowych elementów.

Comments

Myślę że to podejście narobi później problemów

---

Jakie na przykład?

Answer 2

Trzy pierwsze elementy są tworzone na początku funkcji za pomocą petli for i dla nich jest dodawane wydarzenie które po kliknięciu je kasuje, każdy kolejny element jest dodawany poprzez funkcję add() i jego wydarzenie kasacji nie dotyczy, ponieważ w funkcji add() nie jest mu dopisywane =)

 

Wystarczy tworzonemu elementowi za pomocą funkcji add() nadać event.

Poza tym używanie innerHTML oraz tworzenie elementów za jego pomocą jest bardzo złą praktyką z tego co czytałem.