jQuery Eliminar LI de UL con un hipervínculo en el LI

Question

Tengo una lista desordenada:

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

que desea eliminar el <li> del <ul>. He manejado el evento click del elemento classDelete donde trato de eliminar, pero supongo que no funciona porque no puedo eliminar el <li> como lo está llamando un niño.

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


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

     }); 

¿Cuál es el mejor enfoque?

Answer 1

Suponiendo que estés usando una versión reciente de jQuery: (. parent aunque las obras aquí también)

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

closest es un poco más dinámico que parent Se pone el li que está más cerca del elemento actual , hacia arriba en la estructura.

Answer 2

Usted no tiene identificadores en su <li> s

¿Qué hay de simplemente

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

Answer 3

En realidad, la forma en que lo tienes a partir de ahora, id va a ser indefinido, porque ninguno de los li tiene identificaciones.

¿por qué no hacer

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

También, no se olvide de volver falsa.

Answer 4

Lo que terminó trabajando para mí: Prefijo su identificación de atributos con una cadena o guión bajo (como otros han señalado)

Desde frameworks como jQuery Mobile requieren que los identificadores sean únicos en todas las páginas (no sólo en una página, prefijo con el nombre de la página, un guión bajo y la identificación numérica que me permite acceder a los registros en una base de datos.

En lugar de enlazar a una clase o al control ul, use 'on' para enlazar a la li de la lista primaria:

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