单击按钮时添加/删除<li>项目列表 - Twitter Bootstrap </li>

Question

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

我见过很多带有这种条件功能的程序，我想在我的Twitter Bootstrap项目中重新创建它，但是我无法弄清楚如何使Add（+）和Minus（ - ）功能在前端。

1. 我想知道是否有一个已存在的插件可以执行此类功能吗？

2. 如果不是，我希望通过JavaScript / jQuery实现获得一些帮助。

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

DEMO ：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

我建议使用jQuery's load方法加载动态内容，而不是在字符串声明中更新所有内容（这是更新的噩梦）：

$('.add').on('click', function() {
   var new_id = parseInt($('ul[id*=conditionRow').length) + 1;
   var selector = 'conditionRow-' + new_id;
   $(this).before('<ul id="' + selector + '"></ul>');
   $(selector).load('/path/to/load/script');
});

$('.remove').on('click', function() {
   if (confirm("Are you sure?")) {
      $(this).parents('ul').remove();
   }
});

在加载脚本中，您只需输出一个HTML文件：

<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>

您还可以在加载调用中传递参数，以使HTML更具动态性。

Answer 2

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