删除 bootstrap 手风琴面板 (Jquery)

Question

我有一个 bootstrap 手风琴，它的面板是根据 input type=number 中的输入生成的。问题是当我想删除时，它会删除一个面板。我只能删除内部 div，但 panel-heading 仍然出现在手风琴中。

这是手风琴的HTML：

<div class="panel-group" id="accordion">

    </div>
</div>

和模板：

<div class="panel panel-default" id="template_shovel">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                    Shovel 01
                </a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">
Some more HTML
</div>

    </div>
    </div>

JavaScript:

var hash = 1;
$(function () {
    $(':input').bind('keyup mouseup', function () {
        var $templateShovel = $('#template_shovel');

        if (this.id == 'nshovels') {
            var value = $(this).val();
            if (value == hash) {
                var $newPanel = $templateShovel.clone();
                $newPanel.find(".collapse").removeClass("in");
                $newPanel.find(".accordion-toggle").attr("href", "#collapseShovel" + (hash))
                         .text("Shovel - n #" + hash);
                $newPanel.find(".panel-collapse").attr("id", "collapseShovel" + hash).addClass("collapse").removeClass("in");
                $('#accordion').append($newPanel.fadeIn());
                hash++;
            }
            else if (value < hash) {
                var idPanel = '#collapseShovel' + (hash - 1).toString();
                $('#accordion').find(idPanel).closest('div').andSelf().remove();

                hash--;
            }
        }
    });
});

nshovels 是必须添加或删除面板的输入的 id。

Answer 1

如果我没理解错的话，您是想同时删除 div.panel-heading 和 div.panel-collapse，但保留 div.panel。为此可以在定位面板后使用 .empty()。这将删除所有子元素，但保留 div.panel 本身。

var idPanel = '#collapseShovel' + (hash - 1).toString();
$('#accordion').find(idPanel).closest('.panel').empty();

否则，如果您尝试删除包含 div.panel-heading 和 div.panel-collapse 的实际 div.panel 项目：

var idPanel = '#collapseShovel' + (hash - 1).toString();
$('#accordion').find(idPanel).closest('.panel').remove();

这是一个 jsfiddle 演示折叠面板手风琴的基本 remove() 与 empty() 功能以及 input:number 模糊示例：

希望这对您有所帮助！

删除 bootstrap 手风琴面板 (Jquery)

Remove bootstrap accordion panel (Jquery)

html

javascript

jquery

twitter-bootstrap

bootstrap-accordion