使用 Jquery 删除手风琴面板

Question

在搜索时，我基本上可以找到如何使用 Jquery 手风琴添加面板，并且没问题。 但是，如何删除我添加的同一面板？

我有这个 fiddle:http://jsfiddle.net/cof7ojky/12/ 工作，它向相应的面板添加了一个面板。

但现在我想删除我添加的相同面板 类似于此 fiddle：http://jsfiddle.net/robschmuecker/m5TMF/163/

这是我的代码：

JQuery

$(function() {
  $("#accordion").accordion({
    collapsible: true,
    heightStyle: "content"
  });
  $('#sub-project-button').click(function() {
  // Add a new header and panel
  $( "<h3>New Panel</h3>" ).appendTo( "#accordion" );
  $( "<div>jQuery UI sure is awesome!</div>" ).appendTo( "#accordion" );
  // Refresh the accordion
  $( "#accordion" ).accordion( "refresh" );
  });
});

HTML

<button id="sub-project-button" onclick="changeClassCancel()" type="button" class="btn btn-default">Lorem</button>
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
</div>

请帮助！提前致谢！感觉很简单，找了几个小时没找到

这是我在 Jquery 网站上使用的关于 'add/remove panels' 的 link：http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-add-remove-panels，但不知道如何删除。

谢谢

Answer 1

你的和这个例子的主要区别在于他使用了一个易于克隆和删除的模板。您只需添加 <h3>，然后添加带有内容的 <div>（无包装）。

要模仿您提供的示例的作用，只需向 header 添加一个小的 link，点击后，它会删除 header 和下面的 div（包含面板的内容）。

这只需对代码进行两处小改动即可实现：

1) 添加 link/button 以删除面板（为简单起见，我使用了 <a>）：

$("<h3>New Panel<a onclick='removePanel(this)' style='float:right'>X</a></h3>" ).appendTo( "#accordion" );

2) 添加函数removePanel(a) 删除要删除的面板元素（<h3> 和<div>）：

function removePanel(a) {
    // first remove the div, then the header
    $(a).parent().next().remove();
    $(a).parent().remove();
    return false;
}

不是最干净的选项，但它可以工作。你可以在这里看到它：http://jsfiddle.net/cof7ojky/14/

使用 Jquery 删除手风琴面板

REMOVE Accordion Panel using Jquery

html

jquery

accordion

removeclass

jquery-ui-accordion