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 veux supprimer 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?
4 réponses
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 bien.) Il obtient le li qui est le plus proche de l'élément courant, vers le haut dans la structure.
En Fait, la façon dont vous avez dès maintenant, id va être défini, car aucun des li id.
Pourquoi ne pas simplement faire
$(this).parent().remove()
Aussi, n'oubliez pas de fausse déclaration.
Vous n'avez pas D'ID sur votre <li>s
Que diriez-vous simplement
$(this).parent().remove();
Qu'est-ce qui a fini par travailler pour moi: Préfixez vos attributs d'id avec une chaîne ou un trait de soulignement (comme d'autres l'ont souligné)
Puisque les frameworks comme jQuery Mobile exigent que les ID 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'id 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 se lier au li de la liste parente:
$('#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...
});