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:

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

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

Answer 2

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

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

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

также не забудьте вернуть false.

Answer 3

У вас нет идентификаторов на <li> s

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

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

Answer 4

Что в итоге сработало для меня: Добавьте к вашим атрибутам id строку или подчеркивание (как указали другие)

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

Вместо привязки к классу или элементу управления 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...
});