jQuery Supprimer LI de UL avec un lien hypertexte dans le 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 souhaite supprimer le <li> du <ul> . J'ai géré l'événement click de la classe itemDelete où j'essaye 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:

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

closest est un peu plus dynamique que parent (bien que parent fonctionne également ici.) Il obtient le li plus proche du élément courant, vers le haut dans la structure.

Answer 2

En fait, de la façon dont vous l'avez maintenant, id ne sera pas défini, car aucun des li n'a d'identifiant.

pourquoi ne pas faire

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

n'oubliez pas non plus de renvoyer false.

Answer 3

Vous n'avez pas d'ID sur votre <li> s

Que diriez-vous simplement

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

Answer 4

Qu'est-ce qui a fonctionné pour moi: préfixez vos attributs id avec une chaîne ou un trait de soulignement (comme d'autres l'ont souligné)

Étant donné que les cadres comme jQuery Mobile nécessitent que les identifiants soient uniques sur toutes les pages (pas seulement sur une page, je préfixe 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 lier à une classe ou au contrôle ul, utilisez 'on' pour vous lier au li de la liste parent:

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