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/