0

我正在使用 jQuery UI，特别是手风琴。我想为每个可以隐藏它的手风琴添加一个“删除”按钮。

我当前的代码只是将可见性设置为隐藏在 div 上。但是，我需要完全移除手风琴。

这是我的html布局方式。

<div class="my-accordion">
    <h3>Accordion 1</h3>
    <div>
        <p>derp</p>
        <div class="remove">REMOVE</div>  
    </div>
    <h3>Accordion 2</h3>
    <div>
        <p>derp</p>
        <div class="remove">REMOVE</div>  
    </div>
    <h3>Accordion 3</h3>
    <div>
        <p>derp</p>
        <div class="remove">REMOVE</div>  
    </div>
</div>

而且，这是我的 jQuery。

$(function() {
    $( ".my-accordion" ).accordion();
});

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

1 回答 1

1 
$('.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
});

演示

要删除父级，请div使用.remove().

或连续

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

演示

笔记

如果您可以将每个手风琴div包装在如下包装器中会更好：

HTML

<div class="my-accordion">
    <div class="accordion-wrapper">
       <h3>Accordion 1</h3>
       <div>
        <p>derp</p>
        <div class="remove">REMOVE</div>  
       </div>
     </div>
    .....
</div>

并更改 jQuery 代码，如：

$('.remove').click(function(e) {
    $(this).parents('div.accordion-wrapper').remove();
});
于 2012-08-08T17:09:09.920 回答