Help with jQuery Traversal

I'm struggling a bit with traversing in jQuery. Here开发者_运维知识库's the relevant markup:

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

This is code for a jQuery UI 'Sortable' element. Here's what I want to happen.

When the Delete thing is clicked ($('.delete')), I want the <li> item it's contained within to be removed.

I've tried using $('.delete').parent().parent().remove(); but in the case of having two items, that seems to delete both of them. I'm a bit confused by this. I also tried using closest() to find the closest li, but that didn't seem to work either.

How should I best traverse the DOM in this case?

Thanks!

Jack

---

Try:

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

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

Note: available in jQuery 1.4+

---

The .closest('li') should work to get the <li>.

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

It will return the first <li> element that is an ancestor of your link.

An alternative is .parents('li:first').

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

You can omit the :first selector if you don't have nested lists.

---

The issue is that you are using a class selector in your 'remove' line.. that means every element with the class .delete is being affected, thus why multiple elements are being deleted.

Try this instead:

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

The $(this) object is the element that was actually clicked on, so while the click function applies to ALL .delete elements, the line inside only applys to the current one.

Hope that helps :)

---

You have to try to make a reduction of your selector:

$('li').has(this)

---

It would be best to give the <li>s id's so you can do something like $('#myLI').remove();

---

I'd add a class to the li items and use closest(), so it would be something like $('.delete').closest('.lirow').remove() where the li items had a class of lirow.