javascript - 单击按钮时添加/删除要列出的 <li> 项目 - Twitter Bootstrap

Question

我目前正在尝试在我的项目中创建条件规则选项。我正在尝试设置一个智能过滤系统(类似于电子邮件)，用户可以在下拉列表中选择不同的选项，并确定如何动态填充文件夹。

我见过许多具有此条件功能的程序，我想在我的 Twitter Bootstrap 项目中重新创建它，但我无法弄清楚如何让加(+)和减(-)功能在前端。

1. 我想知道是否已有插件可以实现此类功能？

2. 如果没有，我希望获得一些帮助来通过 JavaScript/jQuery 实现来完成此操作。

我已将基本 HTML 和 CSS 放在这里，以便您可以看到我正在尝试做什么

演示:http://jsfiddle.net/y7CwE/1/

注意:默认情况下总是有 1 行(并且第一行没有减号来删除它，只有后续行才有菜单功能)

<p>Please Create the following rules for your group</p>
<ul id="conditionRow-1">
<li>
    <select>
        <option>Client</option>
        <option>Resource</option>
        <option>Site</option>
        <option>Options</option>
        <option>Meals</option>
    </select>
</li>
<li>
    <select>
        <option>is</option>
        <option>is not</option>
    </select>
</li>
<li>
    <select>
        <option>X</option>
        <option>y</option>
        <option>Z</option>
        <option>A</option>
        <option>B</option>
    </select>
</li>
<a href="#" data-toggle="tooltip" title="Add Another Rule"><i class="icon-plus"></i></a>
</ul>

<ul id="conditionRow-2">
<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<a href="#" data-toggle="tooltip" title="Add Another Rule"><i class="icon-plus"></i></a>
<a href="#" data-toggle="tooltip" title="Remove Rule"><i class="icon-minus"></i></a>
</ul>

Answer 1

Little amends 链接不应放置在 li 之外:

<p>Please Create the following rules for your group</p>
<ul>
<li>
    <select>
        <option>Client</option>
        <option>Resource</option>
        <option>Site</option>
        <option>Options</option>
        <option>Meals</option>
    </select>
</li>
<li>
    <select>
        <option>is</option>
        <option>is not</option>
    </select>
</li>
<li>
    <select>
        <option>X</option>
        <option>y</option>
        <option>Z</option>
        <option>A</option>
        <option>B</option>
    </select>
</li>
<li> 
    <a href="#" data-toggle="tooltip" title="Add Another Rule"><i class="icon-plus"></i></a>
</li>
</ul> 

jQuery:

$(document).ready(function () {
    $("a").tooltip();
    var add = true;
    $(document).on('click', '.icon-plus', function () {
        var $clone = $(this).closest('ul').clone();
        $clone.insertAfter($(this).closest('ul'));
        if(add==true){
            $clone.last('li').append('<a href="#" data-toggle="tooltip" title="remove this"><i class="icon-minus"></i></a>');
            add=false;
        }
    });
    $(document).on('click', '.icon-minus', function () {
       $(this).closest('ul').remove();
    });
});

checkout the updated 4th fiddle here