CODEWITHSUNDEEP
jqueryjquery-uidomjquery-ui-sortabletraversal
Jack
Jack

Reputation: 9784

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

Upvotes: 2

Views: 137

Answers (6)

Damien-Wright
Damien-Wright

Reputation: 7544

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

Upvotes: 1

Shawn Campbell
Shawn Campbell

Reputation: 193

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.

Upvotes: 0

Mike Lentini
Mike Lentini

Reputation: 1358

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

Upvotes: 0

user113716
user113716

Reputation: 322492

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.

Upvotes: 1

Marnix
Marnix

Reputation: 6547

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

$('li').has(this)

Upvotes: 0

Jason Benson
Jason Benson

Reputation: 3399

Try: 

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

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

Note: available in jQuery 1.4+

Upvotes: 3

Related Questions