Hide Then Remove a Jquery Draggable Div

Question

Hello,

I'm using Jquery for some draggable divs in Drupal, and it all works great. I just need to be able to close the div / box when it's not needed anymore. Here's my code:

<?php
drupal_add_js('
$(document).ready(function() {
  $(".cc-drag").draggable({ stack: ".cc-drag", axis: "x" });
});

    $(".cc_close").click(function () {
      $(this).hide(2000, function () {
        $(this).remove();
      });
    });

','inline');
?>

<div class="cc-drag">
    <div class="cc_top">
    <div class="cc_close">&nbsp;</div>
    <div class="cc_content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit dolor, ornare non vulputate quis, dictum ut neque. 
    Nunc non velit at nulla posuere pulvinar. Maecenas vitae diam iaculis lorem sagittis condimentum et at elit. 
    Praesent ac augue dolor. 
    Sed sit amet orci leo, vitae sagittis ante. 
    Phasellus id volutpat nibh. 
    Nam ullamcorper mi at urna cursus vitae aliquet est ullamcorper.
    </div>
    </div>
<div class="cc_bottom"></div>
</div>

<div class="cc-drag">
    <div class="cc_top">
    <div class="cc_close">&nbsp;</div>
    <div class="cc_content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit dolor, ornare non vulputate quis, dictum ut neque. 
    Nunc non velit at nulla posuere pulvinar. Maecenas vitae diam iaculis lorem sagittis condimentum et at elit. 
    Praesent ac augue dolor. 
    Sed sit amet orci leo, vitae sagittis ante. 
    Phasellus id volutpat nibh. 
    Nam ullamcorper mi at urna cursus vitae aliquet est ullamcorper.
    </div>
    </div>
<div class="cc_bottom"></div>
</div>

<div class="cc-drag">
    <div class="cc_top">
    <div class="cc_close">&nbsp;</div>
    <div class="cc_content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit dolor, ornare non vulputate quis, dictum ut neque. 
    Nunc non velit at nulla posuere pulvinar. Maecenas vitae diam iaculis lorem sagittis condimentum et at elit. 
    Praesent ac augue dolor. 
    Sed sit amet orci leo, vitae sagittis ante. 
    Phasellus id volutpat nibh. 
    Nam ullamcorper mi at urna cursus vitae aliquet est ullamcorper.
    </div>
    </div>
<div class="cc_bottom"></div>
</div>

I'm wanting to close the parent div cc-drag, when the user clicks cc_close, which is an X graphic in the corner.

Any ideas? Thanks!

Answer 1

You can just target the parent div, which is the one you want to close:

$(".cc_close").click(function () {
  $(this).parent().hide(2000, function () {
    $(this).remove();
  });
});

Answer 2

Ah...silly mistake, I'd closed it too early, with });

Working code now reads:

<?php
drupal_add_js('
    $(document).ready(function() {
      $(".cc-drag").draggable({ stack: ".cc-drag", containment: "#page-wrapper" });


    $(".cc_close").click(function () {
      $(this).parent().hide(2000, function () {
        $(this).remove();
      });
    });

    });
','inline');
?>

Thanks for your help googletorp...