CODEWITHSUNDEEP
javascriptjqueryhtmlaccordionjquery-ui-accordion
Squirrl
Squirrl

Reputation: 4966

How do I delete a section of a jQuery accordion?

So, I have an accordion menu and in each div I have a red square. I'm trying to make it so that when I click the red square that particular div and the < h3 > link all disappear. I can get the div to go, but the title always stays, and I'm not sure how to select and remove it. Thanks as always.

My HTML: 

<div id="accordion">

    <h3><a href="#">Section 1</a></h3>
    <div class="squares">
            <a href="#" class="green">1</a>
            <a href="# "class="red">2</a>
            <a href="#" class="blue">3</a>  
            <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
    </div>
</div>

And here is my JS: 

$('document').ready(function(){
  $('#accordion .red').click(function(){
    $(this).parent('div').remove();

    return false;
  });
});

Upvotes: 1

Views: 1536

Answers (3)

billyonecan
billyonecan

Reputation: 20270

Here's a more elegant solution, using andSelf():

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

Here's a fiddle

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

First remove the h3 element using

$(this).parent('div').prev('h3').remove();

Then remove your div

try this

$('document').ready(function(){
  $('#accordion .red').click(function(){
   $(this).parent('div').prev('h3').remove();
    $(this).parent('div').remove();

    return false;
  });
});

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16685

$('document').ready(function(){
  $('#accordion .red').click(function(){

    $(this).parent('div').prev( 'h3' ).remove();
    $(this).parent('div').remove();

    return false;
  });
});

Upvotes: 2

Related Questions