Hi guys,
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
