Jquery Удалить LI от UL с гиперссылкой в ​​LI

Question

У меня есть неупорядоченный список:

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

Я хочу, чтобы удалить <li> из <ul>. Я обработал событие click класса itemDelete, где я пытаюсь удалить, но я предполагаю, что он не работает, потому что я не могу удалить <li>, когда ребенок вызывает его?

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


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

     }); 

Какой лучший подход?

Answer 1

Предполагая, что вы используете последнюю версию JQuery: (. Хотя и parent работ здесь, а)

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

closest является немного более динамичным, чем parent Он получает li, что ближе всего к текущему элементу , вверх в структуре.

Answer 2

У вас нет удостоверения на ваш <li> s

Как насчет просто

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

Answer 3

На самом деле, как вы должны это как сейчас, id собирается быть неопределенным, потому что ни один из li имеет идентификаторы.

почему бы не просто сделать

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

также, не забудьте вернуться ложным.

Answer 4

Что завелся работает для меня: Приставка ваш идентификатор атрибутов с помощью строки или символа подчеркивания (как уже отмечалось)

Поскольку рамки как JQuery Mobile требуют, чтобы Идентификаторы быть уникальным для всех страниц (а не только в одном страницы, I префикс с именем страницы, подчеркиванием и числовым идентификатором, который позволяет мне получать доступ к записям в базе данных.

Вместо привязки к классу или элементу управления ul используйте 'on' для привязки к li родительский список:

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