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

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

<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();

        });

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

Ответы

Ответ 1

Предполагая, что вы используете последнюю версию jQuery:

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

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

Ответ 2

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

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

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

также не забывайте возвращать false.

Ответ 3

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

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

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

Ответ 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...
});