删除jQuery UI手风琴 [英] Removing jQuery UI Accordion

问题描述

我正在使用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。

<$ （）;
$（.my-accordion）.accordion（）;
}）;

//这是一个巨大的失败。
$（'。remove'）。click（function（e）{
$（this）.parent（）。hide（）;
e.preventDefault（）;
}）;

解决方案

  $（ '.remove'）。click（function（e）{
 var parent = $（this）.parent（'div'）; 
 parent // REMOVE parent $ div 
 .prev（ 'h3'）//捕获之前的h3 
 .andSelf（）//父div 
 .remove（）; //删除父div和h3 
}）; 
  

DEMO

删除父 div strong> .remove（）

或连续

  $（'。remove'）。click（function（e）{
 $（this）.parent（'div'）。prev（'h3'）。andSelf（）。remove（）; 
}）; 
  

DEMO

注意

如果您可以将每个手风琴包装在如下的 div 包装中： em>

 < 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代码：

  $点击（函数（E）{
 $（本）。家长（ 'div.accordion-包装 '）除去（）（' 删除'。）; 
}）; 
  

I am utilizing the jQuery UI, the accordion specifically. I wanted to add a "remove" button to each accordion that would hide it.

My current code just sets the visibility to hidden on the div. But, I need to completely remove the accordion.

Here is how I have my html laid out.

<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>

And, here is my jQuery.

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

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

解决方案

$('.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

To remove the parent div use .remove().

OR in a row

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

DEMO

Note

It would be better if you can wrap each accordion within a div wrapper like below:

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>

and change the jQuery code like:

$('.remove').click(function(e) {
    $(this).parents('div.accordion-wrapper').remove();
});

这篇关于删除jQuery UI手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！