jQuery Retirer LI de UL avec un lien hypertexte dans la LI

Question

J'ai une liste non ordonnée:

<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> 

Je veux retirer le <li> du <ul>. J'ai géré l'événement click de la classe itemDelete où j'essaie de faire une suppression mais je suppose que cela ne fonctionne pas parce que je ne peux pas supprimer le <li> comme un enfant l'appelle?

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


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

     }); 

Quelle est la meilleure approche?

Answer 1

En supposant que vous utilisez une version récente de jQuery: (. Bien que parent œuvres ici aussi)

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

closest est un peu plus dynamique que parent Il obtient le li qui est le plus proche de l'élément courant , vers le haut dans la structure.

Answer 2

Vous ne disposez pas d'ID sur votre <li> s

Que diriez-vous simplement

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

Answer 3

En fait, la façon dont vous l'avez d'ores et déjà, id va être non défini, car aucun des Li ont des ids.

pourquoi pas seulement

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

aussi, ne pas oublier de retourner faux.

Answer 4

Que liquidée travail pour moi: Prefix votre identifiant les attributs avec une chaîne ou soulignement (comme d'autres l'ont souligné)

Depuis des cadres comme jQuery Mobile exigent que ids être unique à travers toutes les pages (et pas seulement dans un page, préfixe avec le nom de la page, un trait de soulignement et l'identifiant numérique qui me permet d'accéder aux enregistrements dans une base de données

Au lieu de se lier à une classe ou au contrôle ul, utilisez 'on' pour lier au li de la liste des parents:

$('#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... 
});