Removing jQuery Accordion Item

Question

How do you remove an item from a jQuery Accordion? I am trying to give the user the ability to delete an item from a database, displayed in an accordion, and have that item fade out after. I tried hiding the parent DIV of the item but the header remains and the accordion does not function properly after.

Here is the markup (basic accordion usage):

<div id="accordion">
<h3><a href="#">The Title - Item 1</a></h3>
<div>
The Content - Item 1
<a href="#" class="deleteItem">Delete</a>
</div>
<h3><a href="#">The Title - Item 2</a></h3>
<div>
The Content - Item 2
<a href="#" class="deleteItem">Delete</a>
</div>
</div>

Thanks!

Answer 1

assuming you're in the click event of a child of the content div, it would look something like this:

var parent = $(this).closest('div');
var head = parent.prev('h3');
parent.add(head).fadeOut('slow',function(){$(this).remove();});

here is a working example. not sure about the accordion not working afterword, but if it doesn't, try and re-initialize it.