35813

Removing jQuery UI Accordion

Question:

I am utilizing the jQuery UI, the accordion specifically. I wanted to add a "remove" button to each accordion that would hide it.

My current code just sets the visibility to hidden on the div. But, I need to completely remove the accordion.

Here is how I have my html laid out.

<div class="my-accordion"> <h3>Accordion 1</h3> <div>

derp

<div class="remove">REMOVE</div> </div> <h3>Accordion 2</h3> <div>

derp

<div class="remove">REMOVE</div> </div> <h3>Accordion 3</h3> <div>

derp

<div class="remove">REMOVE</div> </div> </div>

And, here is my jQuery.

$(function() { $( ".my-accordion" ).accordion(); }); // This is a giant failure. $('.remove').click(function(e) { $(this).parent().hide(); e.preventDefault(); });

Answer1:

$('.remove').click(function(e) { var parent = $(this).parent('div'); parent // parent div of REMOVE .prev('h3') // catch previous h3 .andSelf() // parent div .remove(); // remove both parent div and h3 });

<strong><a href="http://jsfiddle.net/BfKUg/2/" rel="nofollow">DEMO</a></strong>

To remove the parent div use <strong><a href="http://api.jquery.com/remove" rel="nofollow">.remove()</a></strong>.

<strong>OR in a row</strong>

$('.remove').click(function(e) { $(this).parent('div').prev('h3').andSelf().remove(); });

<strong><a href="http://jsfiddle.net/BfKUg/3/" rel="nofollow">DEMO</a></strong>

<h3>Note</h3>

It would be better if you can wrap each accordion within a div wrapper like below:

<em><strong>HTML</strong></em>

<div class="my-accordion"> <div class="accordion-wrapper"> <h3>Accordion 1</h3> <div>

derp

<div class="remove">REMOVE</div> </div> </div> ..... </div>

and change the jQuery code like:

$('.remove').click(function(e) { $(this).parents('div.accordion-wrapper').remove(); });

Recommend

  • android resolution need help
  • Switch case in Data Binding
  • Ignoring a field without modifying the POJO class with Jackson
  • Powerpoint 2010 VSTO AddIn taskpane on multiple Windows
  • How to replace TouchesBegan with UIGestureRecognizer
  • How to initialize context? [closed]
  • Granting permissions to Azure Active Directory Web Application automatically
  • What's the name of this finding square root algorithm?
  • insert radio value multiple data codeigniter in database to one row?
  • Universal Image Loader reuse images
  • In matplotlib, how do you change the fontsize of a single figure?
  • Cast between interfaces whose interface signatures are same
  • Entity Framework Code First TPC Inheritance Self-Referencing Child Class
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • QLineEdit password safety
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • How to get icons for entities from eclipse?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Acquiring multiple attributes from .xml file in c#
  • Trying to get generic when generic is not available
  • -fvisibility=hidden not passed by compiler for Debug builds
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Java static initializers and reflection
  • embed rChart in Markdown
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • How can I remove ASP.NET Designer.cs files?
  • unknown Exception android
  • JaxB to read class hierarchy
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal