jQuery mit einem Hyperlink in der LI LI von UL entfernen

Question

Ich habe eine ungeordnete Liste:

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

ich die <li> vom <ul> entfernen möchten. Ich habe das click -Ereignis der Klasse itemDelete behandelt, wo ich versuche, eine Entfernung vorzunehmen, aber ich nehme an, dass es nicht funktioniert, weil ich die <li> nicht entfernen kann, wie ein Kind es aufruft?

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


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

     }); 

Was ist der beste Ansatz?

Answer 1

Angenommen, Sie eine aktuelle Version von jQuery verwenden: (. Obwohl parent Werke auch hier)

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

closest ist etwas dynamischer als parent Es ist die li bekommt, der am nächsten zu dem aktuellen Element ist , nach oben in der Struktur.

Answer 2

Sie haben keine IDs auf Ihrem <li> s

Wie wäre es einfach

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

Answer 3

Eigentlich so, wie Sie es schon jetzt haben, id wird nicht definiert werden, da keiner der Li's haben IDs.

warum auch nicht nur

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

, vergessen Sie nicht falsch zurück.

Answer 4

Was für mich in Liquidation arbeiten: Präfix Ihre ID mit einem String-Attribute oder unterstreichen (wie andere haben darauf hingewiesen)

Da Frameworks wie jQuery Mobile verlangen, dass IDs auf allen Seiten (nicht nur in einer eindeutig sein Seite, Präfix mit dem Seitenname, einem Unterstrich und der numerischen ID, die mir Zugriff auf Datensätze in einer Datenbank ermöglicht

Anstatt an eine Klasse oder die ul-Steuerelement binden, verwenden Sie "auf", um an die li von zu binden die Elternliste:

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