0

私はjQueryUI、特にアコーディオンを利用しています。アコーディオンを隠す「削除」ボタンを各アコーディオンに追加したかったのです。

私の現在のコードは、可視性を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 に答える