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>。我已经处理了itemDelete类的click事件，我尝试删除它，但我认为它不起作用，因为我无法删除<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有id。

为什么不做呢

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

另外，不要忘记返回false。

Answer 3

您的<li>

上没有ID

如何简单地

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

Answer 4

为我工作的结果是什么：使用字符串或下划线（正如其他人指出的那样）为您的id属性添加前缀

由于像jQuery Mobile这样的框架要求id在所有页面中都是唯一的（不只是在一个页面中，我的前缀是页面名称，下划线和允许我访问数据库中记录的数字ID。

使用'on'绑定到父列表的li，而不是绑定到类或ul控件：

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

jQuery使用LI中的超链接从UL中删除LI

4 个答案: