jquery - ボタンをクリックするだけで、アコーディオン メニューから項目を削除しようとしています。私は何を間違っていますか？

Question

赤い四角をクリックすると、div全体が消えます。今起きているのは正方形だけではありません。ここに私のJSがあります

$('document').ready(function(){


  $('.theListItem .red').click(function(){
  var $toRemove = $(this).parent('div').prev('h3');
      $toRemove = $toRemove.add($(this).parent('div'));

  $toRemove.animate({height:0}, 500, function(){
    // This is the callback.
    $toRemove.remove();
  });

  return false;
});
});

ここにいくつかのhtmlがあります

div class = "theListItem" data-role="collapsible-set" data-collapsed="false">



    <div data-role="collapsible" data-collapsed="false" data-theme="a">
    <h3>Keep Working!</h3>
<div data-role="controlgroup"  data-type="horizontal">
<a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
<a class="red" href="#" data-role="button">No</a>
<a class="blue" href="index.html" data-role="button">Maybe</a>
</div>
    </div>

    <div data-role="collapsible" data-collapsed="false" data-theme="a">
    <h3>Section 1</h3>
<div data-role="controlgroup"  data-type="horizontal">
<a href="categorize.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
    </div>

Answer 1

メソッドを使用できますclosest。

$('document').ready(function() {
    $('.theListItem .red').click(function() {
        var $toRemove = $(this).closest('div[data-theme="a"]')

        $toRemove.animate({
            height: 0
        }, 500, function() {
            // This is the callback.
            $toRemove.remove();
        });

        return false;
    });
});

http://jsfiddle.net/C5aDA/