Help with jQuery Traversal
Posted
by
Jack Webb-Heller
on Stack Overflow
See other posts from Stack Overflow
or by Jack Webb-Heller
Published on 2011-01-13T21:45:18Z
Indexed on
2011/01/13
21:53 UTC
Read the original article
Hit count: 388
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
© Stack Overflow or respective owner