web-dev-qa-db-fra.com

jQuery Supprimer LI de UL avec un lien hypertexte dans le LI

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'essaie de supprimer, mais je suppose que cela ne fonctionne pas car 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?

javascriptjqueryjquery-ui
32
Jon

En supposant que vous utilisez une version récente de jQuery:

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

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

62
Blixt

En fait, comme 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.

8
helloandre

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

Que diriez-vous simplement

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

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

Étant donné que les frameworks tels que 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 d'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...
});
0
Gene