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

I have a unordered list:

我有一个无序列表：

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

I want to remove the <li> from the <ul>. I have handled the click event of the class itemDelete where I try to do a remove but I assume its not working because I can't remove the <li> as a child is calling it?

我想从

。我已经处理了itemDelete类的click事件，我尝试删除它，但我认为它不起作用，因为我不能删除
。我已经处理了itemDelete类的单击事件，我尝试删除它，但我认为它不起作用，因为我不能删除
，因为一个孩子正在调用它？
，因为一个孩子正在调用它？

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


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

        });

What's the best approach?

什么是最好的方法？

4 个解决方案

#1

Assuming you're using a recent version of jQuery:

假设您使用的是最新版本的jQuery：

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

closest is a little more dynamic than parent (although parent works here as well.) It gets the li that is closest to the current element, upwards in the structure.

最接近的是比父母更有活力（虽然父母也在这里工作。）它获得最接近当前元素的li，在结构中向上。

#2

Actually, the way you have it as of now, id is going to be undefined, because none of the li's have ids.

实际上，就像你现在的方式一样，id将是未定义的，因为没有一个li有id。

why not just do

为什么不做呢

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

also, don't forget to return false.

另外，不要忘记返回虚假。

#3

You don't have IDs on your <li>s

您的

上没有ID

How about simply

怎么样简单

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

#4

What wound up working for me: Prefix your id attributes with a string or underscore (as others have pointed out)

最让我感到困惑的是：使用字符串或下划线为您的id属性添加前缀（正如其他人指出的那样）

Since frameworks like jQuery Mobile require that ids be unique across all pages (not just in one page, I prefix with the page name, an underscore, and the numerical id that lets me access records in a database.

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

Instead of binding to a class or the ul control, use 'on' to bind to the li of the parent list:

而不是绑定到类或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...
});

#1