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!
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With