帮助jQuery Traversal

Question

我在浏览jQuery时遇到了一些麻烦。这是相关的标记：

<ul id="sortable" class="ui-sortable">
    <li>
        <img src="http://ecx.images-amazon.com/images/I/51Vza76tCxL._SL160_.jpg">
        <div class="controls">
            <span class="move">✜</span>
            <span class="delete">✘</span>
        </div>
        <div class="data">
            <h1>War and Peace (Oxford World's Classics)</h1>
            <textarea>Published to coincide with the centenary of Tolstoy's death, here is an exciting new edition of one of the great literary works of world literature.</textarea>
        </div>
    </li>

    <li>
        <img src="http://ecx.images-amazon.com/images/I/51boZxm2seL._SL160_.jpg">
        <div class="controls">
            <span class="move">✜</span>
            <span class="delete">✘</span>
        </div>
        <div class="data">
            <h1>A Christmas Carol and Other Christmas Writings (Penguin Classics)</h1>
            <span>Optionally, write your own description in the box below.</span>
            <textarea>Dicken's Christmas writings-in a new, sumptuous, and delightful clothbound edition.</textarea>
        </div>
    </li>
</ul>

这是jQuery UI的代码＆＃39; Sortable＆＃39;元件。这就是我想要发生的事情。

点击删除内容（$('.delete')）后，我希望删除其中包含的<li>项目。

我尝试使用$('.delete').parent().parent().remove();但是在有两个项目的情况下，这似乎删除了它们。我对此有点困惑。我还尝试使用closest()找到最接近的li，但这似乎也无效。

在这种情况下，我应该如何最好地遍历DOM？

谢谢！

杰克

Answer 1

尝试：

$('.delete').click(function(){
   $(this).parentsUntil('li').parent().remove();
});

http://api.jquery.com/parentsUntil/

注意：可在jQuery 1.4 +中找到

Answer 2

.closest('li')应该可以获得<li>。

$('.delete').click(function() {
    $(this).closest('li').remove();
});

它将返回作为链接祖先的第一个<li>元素。

另一种选择是.parents('li:first')。

$('.delete').click(function() {
    $(this).parents('li:first').remove();
});

如果您没有嵌套列表，则可以省略:first selector。

Answer 3

问题是你在'remove'行中使用了一个类选择器..这意味着每个具有类.delete的元素都会受到影响，因此为什么要删除多个元素。

请改为尝试：

$('.delete').click(function() {
    $(this).parent().parent().remove();
});

$(this)对象是实际点击的元素，因此当click函数适用于所有.delete元素时，内部的行仅适用于当前行。

希望有所帮助：）

Answer 4

您必须尝试减少选择器：

$('li').has(this)

Answer 5

最好提供<li>个ID，以便您可以执行$('#myLI').remove();

之类的操作

Answer 6

我要在li项中添加一个类并使用nearest（），所以它会像$（'。delete'）。nearest（'。lirow'）。remove（）其中li项有一个lirow。