Question

在搜索时，我几乎可以找到如何使用Jquery Accordion添加面板并使其工作没问题。 但是，如何删除我添加的同一个面板？

我有这个小提琴：http://jsfiddle.net/cof7ojky/12/正在为相应的人添加一个小组。

但是现在我想删除我添加的同一个小组，类似于这个小提琴：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网站合作的关于添加/删除面板的链接＆＃39;：http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-add-remove-panels，但不知道如何删除。

感谢

Answer 1

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

要模仿您提供的示例所做的事情，只需向标题添加一个小链接，而不是一次点击，它会删除标题和后面的div（包含面板内容）。

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

1）添加链接/按钮以删除面板（为简单起见，我使用了<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删除Accordion Panel

1 个答案: