Bootstrap 手风琴在按钮单击时删除面板

Question

我正在使用 Bootstrap 手风琴，它是根据选择列表选项中的选择选项动态创建的，因此对于选择的每个选项，我都会在现有手风琴上附加一个手风琴面板。

除了能够添加面板之外，我还希望能够移除面板。我确实考虑过有一个关闭按钮，但我无法在关闭按钮（跨度）上定位点击事件。

这是我创建手风琴时输出的示例

<div id="menu">
    <div class="panel list-group">
        <a href="#" class="list-group-item default" data-toggle="collapse" data-target="#sm" data-parent="#menu">MESSAGES <span class="label label-info">5</span> <span class="fa fa-close pull-right"></span></a>
        <div id="sm" class="sublinks collapse">
            <div class="list-group-item">
                TEST1
            </div>
            <div class="list-group-item">
                TEST2
            </div>
            <div class="list-group-item">
                TEST3
            </div>
        </div>
    </div>
</div>

我认为单击此元素 <span class="fa fa-close pull-right"> 会导致触发事件，但它永远不会触发。它只是作为默认行为打开/关闭面板。

我确实考虑过尝试使用 Jquery 来处理手风琴，但这似乎需要付出很多额外的努力。

我是否需要将关闭按钮放在其他地方，或者我错过了任何可以让它工作的东西？

Answer 1

$(".fa-close").click(function(){
    $(this).parent().parent().parent().remove();
})

Answer 2

您应该使用所谓的event delegation。
单击事件侦听器/处理程序附加到一个共同的祖先（在这种情况下为div#menu）。

使用此技术，您通常必须在事件对象event.target 属性的帮助下测试原始点击元素，以了解是否有任何操作适用。 jQuery 通过使 on() 函数在处理函数之前接受第二个参数（作为与目标匹配的选择器）来简化此过程。然后，您只需执行实际操作：在这种情况下，关联的 .panel 删除。

主要优点是动态添加的.panels（在事件注册之后）也会触发“删除”处理程序。内存中只保存一个函数。

您还必须将 span.fa-close 放在锚点之外，并使用一些 CSS 来防止手风琴折叠行为干扰关闭操作。

示例：

$(function(){
    // When a click happens in the menu and has been triggered
    // by an element having the '.fa-close' applied to it.
    $('#menu').on('click', '.fa-close', function(e){
       // Remove the associated '.panel' element
       $(this).closest('.panel').remove();
    });
});

#menu .panel{position: relative}
#menu .fa-close{position: absolute; right:15px; top:15px; cursor:pointer;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="menu">
    <div class="panel list-group">
        <a href="#" class="list-group-item default" data-toggle="collapse" data-target="#sm1" data-parent="#menu">
            MESSAGES <span class="label label-info">5</span>
        </a>
        <div id="sm1" class="sublinks collapse">
            <div class="list-group-item">
                TEST1
            </div>
            <div class="list-group-item">
                TEST2
            </div>
            <div class="list-group-item">
                TEST3
            </div>
        </div>
        <span class="fa fa-close pull-right" title="Remove this entry"></span>
    </div>

    <div class="panel list-group">
        <a href="#" class="list-group-item default" data-toggle="collapse" data-target="#sm2" data-parent="#menu">
          MESSAGES <span class="label label-info">3</span>
        </a>
        <div id="sm2" class="sublinks collapse">
            <div class="list-group-item">
                TEST4
            </div>
            <div class="list-group-item">
                TEST5
            </div>
            <div class="list-group-item">
                TEST6
            </div>
        </div>
        <span class="fa fa-close pull-right"></span>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

否则，您必须在每个span 上附加一个点击事件处理程序，并且每次将新面板添加到 DOM 时都这样做。