Question

我有一个清单：

<ul id="links_list" class="links_list">

<li id="296" class="sidebar_link">text
    <a onclick="deleteLink(296)" href="javascript:void(0);">Delete Link</a>
</li>

<li id="297" class="sidebar_link">text2
    <a onclick="deleteLink(297)" href="javascript:void(0);">Delete Link</a>
</li>

    ... etc for a long list of items ...

</ul>

我现在可以使用它删除第一个元素：

function deleteFirst() {

... do ajax stuff ..

$('ul.links_list li:first-child').fadeTo("fast", 0.01, function(){ //fade
    $(this).slideUp("fast", function() { //slide up
        $(this).remove(); //then remove from the DOM
    });

});

}

如何修改此功能以允许我删除列表中的任何项目？

Answer 1

而不是$('ul.links_list li:first-child')使用$('ul.links_list li#' + itemID)并通过删除功能传递itemID。

Answer 2

我会立即绑定所有链接而不是内联，如下所示：

<ul id="links_list" class="links_list">
  <li data-id="296" class="sidebar_link">text
    <a href="#">Delete Link</a>
  </li>
  <li data-id="297" class="sidebar_link">text2
    <a href="#">Delete Link</a>
  </li>
</ul>

然后这样的脚本：

$('#links_list li a').click(function(e) {
  var id = $(this).closest("li").attr("data-id");
  //do ajax stuff
  $(this).closest("li").fadeTo("fast", 0.01).slideUp("fast", function() {
    $(this).remove();
  });
  e.preventDefault(); //prevent page scrolling with # href
});

这解决了一些问题和一些改进：

除非您使用HTML5
标记要轻得多（你也可以删除这些类）
.slideUp()是与[{3}}相同的排队动画，无需使用回调
ID相对较多，不再有内联脚本，更易于维护，而且在另一个文件中

.fadeTo()

Answer 3

：nth-child Selector

请参阅http://api.jquery.com/nth-child-selector/

例如：

$('ul.links_list li:nth-child(10)')

Answer 4

您可以更改HTML以传递对所单击的HTML的引用，然后使用该引用。

HTML

<li id="296" class="sidebar_link">text
    <a onclick="deleteLink(this)" href="javascript:void(0);">Delete Link</a>
</li>
<li id="297" class="sidebar_link">text2
    <a onclick="deleteLink(this)" href="javascript:void(0);">Delete Link</a>
</li>

的javascript

function deleteLink( elem ) {
    $( elem.parentNode ).fadeTo("fast", 0.01, function() { //fade
        $(this).slideUp("fast", function() { //slide up
            $(this).remove(); //then remove from the DOM
        });
    });
}

帮助使用jquery从列表中删除元素

4 个答案: