Question

我正在使用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();
});

Answer 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
});

<强> DEMO

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

或连续

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

<强> DEMO

注意

如果你能将每个手风琴包装在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(); });

删除jQuery UI Accordion

1 个答案:

注意