Question

我有一个自举手风琴，其面板是根据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和div.panel-heading的实际div.panel-collapse项：

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

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

希望这有帮助！

删除bootstrap手风琴面板（Jquery）

1 个答案: