本文介绍了删除jQuery UI手风琴的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



删除父 div strong>



或连续

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



注意



如果您可以将每个手风琴包装在如下的 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手风琴的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 16:44