jQuery Usuń LI z UL z hiperłącze w LI

Question

Mam nieuporządkowaną listę:

<ul id="sortable"> 
    <li id="1" class="ui-state-default">First <a href='#' title='delete' class="itemDelete">x</a></li> 
    <li id="2" class="ui-state-default">Second <a href='#' title='delete' class="itemDelete">x</a></li> 
    <li id="3" class="ui-state-default">Third <a href='#' title='delete' class="itemDelete">x</a></li> 
</ul> 

Chcę usunąć <li> z <ul>. Obsługiwałem zdarzenie click klasy itemDelete, gdzie próbuję usunąć, ale zakładam, że nie działa, ponieważ nie mogę usunąć <li> jak dziecko to nazywa?

$('.itemDelete').live("click", function() { 
      var id = $(this).parent().get(0).id; 


      $("#" + id).remove(); 

     }); 

Jakie jest najlepsze podejście?

Answer 1

Zakładając, że używasz najnowszej wersji jQuery (. Chociaż parent prace również tutaj)

$('#sortable').on('click', '.itemDelete', function() { 
    $(this).closest('li').remove(); 
}); 

closest jest trochę bardziej dynamiczny niż parent to dostaje li że jest najbliżej do bieżącego elementu , w górę w strukturze.

Answer 2

Nie masz identyfikatory na własną <li> s

Jak o prostu

$(this).parent().remove(); 

Answer 3

Właściwie sposób masz go już teraz, id będzie niezdefiniowana, ponieważ żaden z li mają identyfikatory.

dlaczego nie zrobić

$(this).parent().remove() 

również, nie zapomnij return false.

Answer 4

Co likwidacji pracuje dla mnie: Prefiks Identyfikator atrybuty sznurkiem lub podkreślenia (jak inni zwrócili uwagę)

Ponieważ ramy takie jak jQuery mobilnej wymaga że identyfikatory być unikatowe na wszystkich stronach (nie tylko w jednym strony, poprzedzam nazwą strony, podkreśleniem i identyfikatorem numerycznym, który umożliwia dostęp do rekordów w bazie danych. lista nadrzędna:

$('#sortable').on('dblclick', 'li' function() { 
     aval = $(this).attr('id').match(/\d+/g); // only want the numbers... 
     id = aval[0]; 
     name = $(this).text(); // in case you need these for a post... 
     li = $(this); // so we can remove it from the list after the 'this' object changes inside the ajax call... 
     // make an ajax call to the server 
     var jqxhr = $.post("somepage.php", {name: name, id: id}, 
      function(data) { 
      li.remove(); 
      $("#sortable").listview("refresh"); 
    },'json').fail(function() { alert("error"); }); 
    return false; // preventDefault doesn't seem to work as well... 
});