Entfernen Sie ein (ohne ID) Element von UL jquery

Question

Hallo!

Mein Problem ist, dass ich so zu einem UL bin anhängen:

$("#tagek").append("<li><a>"+arr[0]+"</a><span class='ex'><a>X</a></span></li>"); 

Also nur kurz: ich einen Tag-Cloud machen will. Wenn jemand ein Komma eingibt, füge das Tag der ul-Liste hinzu. Das funktioniert wie ein Zauber, aber ich möchte dem Element "li" ein "X" hinzufügen. Wenn jemand darauf klickt, wird es entfernt. So etwas:

$(document).on('click','.ex',function(){ 
var li = $('.ex').closest("li"); 
li.remove(); 
}); 

Also, wenn ich auf der ".ex" umspannt seine li verschwinden soll. Das funktioniert, aber JEDES li wird (logisch) entfernt, weil jedes "X" dieselbe Klasse hat.

Irgendwelche Ideen dazu?

Vielleicht mit .eq()?

Vielen Dank.

Answer 1

Sie experimentieren mit diesem Verhalten, weil Sie das nächstgelegene 'li' jedes '.ex' Elements statt des angeklickten Elements entfernen. Verwenden Sie die $ (this) Wähler in dem Handler statt:

Versuchen:

$(document).on('click','.ex',function(){ 
    $(this).parent().remove(); 
}); 

Answer 2

Es ist, weil Sie wieder die Auswahl .ex innerhalb der Funktion Handler (die alle von ihnen bekommt), statt das eine der Verwendung dass das Ereignis ausgelöst wurde durch.

Fix:

$(document).on('click', '.ex', function() { 
    $(this).closest('li').remove(); 
}); 

Edit: Nicht genügend Karma zu kommentieren, aber alex030293 Code sollte schneller ausführen, geht aber davon aus, dass das Element ein direktes Kind ist wie zu einem Nachkommen gegenüber. Wenn dies immer der Fall ist, ist es besser, seinen Code zu verwenden. Wenn es eine Situation gibt, in der das .ex Element in einem anderen Tag gekapselt ist, ist es besser, meins zu verwenden.

Answer 3

ich denke, du brauchst das, wenn Sie jquery verwenden.

$(document).on('click','.ex',function(){ 
    var li = $(this).closest("li"); 
    li.remove(); 
    });