[英]Remove bootstrap accordion panel (Jquery)
I have a bootstrap accordion whose panels are generated according the input in an input type=number
. 我有一个bootstrap手风琴,其面板是根据
input type=number
中的input type=number
生成的。 The problem is that when I want to delete, it removes a panel. 问题是,当我要删除时,它会删除一个面板。 I have only been able to remove the internal div, but the
panel-heading
still appears in the accordion. 我只能删除内部div,但是
panel-heading
仍显示在手风琴中。
This is the HTML for accordion: 这是手风琴的HTML:
<div class="panel-group" id="accordion">
</div>
</div>
and the template: 和模板:
<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>
The JavaScript: 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
is the input's id that has to add or delete panels. nshovels
是输入的ID,必须添加或删除面板。
If I'm understanding correctly, you are trying to delete both the div.panel-heading
AND div.panel-collapse
, but keep the div.panel
. 如果我的理解正确,您正在尝试同时删除
div.panel-heading
和div.panel-collapse
,但保留div.panel
。 To this can use .empty()
after targeting the panel. 为此,可以在定位面板后使用
.empty()
。 This will remove all child elements, but keep the div.panel
itself. 这将删除所有子元素,但保留
div.panel
本身。
var idPanel = '#collapseShovel' + (hash - 1).toString();
$('#accordion').find(idPanel).closest('.panel').empty();
Otherwise if you're trying to remove the actual div.panel
item that contains the div.panel-heading
and div.panel-collapse
: 否则,如果您尝试删除包含
div.panel-heading
和div.panel-collapse
的实际div.panel
项目:
var idPanel = '#collapseShovel' + (hash - 1).toString();
$('#accordion').find(idPanel).closest('.panel').remove();
Here is a jsfiddle demonstrating the basic remove()
vs empty()
functionality for an collapse panel accordion as well as input:number
blur example: 这是一个jsfiddle,展示了折叠面板手风琴的基本
remove()
vs empty()
功能以及input:number
模糊示例:
Hopefully this helps! 希望这会有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.