使用jQuery在Bootstrap网格中增删元素并禁止删除首个元素

一、禁止删除首个元素 #

通过控制删除按钮的显示/隐藏，以及删除后的行数判断，确保首个元素无法被删除。

二、添加元素限制 #

实现两种实用限制规则：

• 当前行输入框不为空时，才允许添加新行
• 限制最大添加行数（示例设为5行，可自行调整）

修改后的完整代码 #

HTML部分

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
    <div class="form-group row custom-upload">
        <div class="col-md-12">
            <div data-role="appendRow">
                <div class="form-inline form-row">
                    <input type="text" class="form-control mb-2 mr-sm-2 col-sm-4" placeholder="Enter....">                          
                    <button class="btn btn-sm btn-danger mb-2" data-role="remove">
                        <i class="fa fa-minus"></i>
                    </button>
                    <button class="btn btn-sm btn-primary mb-2" data-role="add">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>  
            </div> 
        </div>
    </div>
</div>

注：移除了重复的Bootstrap引用，删除了输入框的重复input属性和固定id（避免重复ID引发的DOM问题）

jQuery部分

$(function() {
    // 初始化：隐藏首个元素的删除按钮
    $('[data-role="appendRow"] .form-row:first [data-role="remove"]').hide();

    // 删除按钮点击事件
    $(document).on('click', '[data-role="appendRow"] .form-row [data-role="remove"]', function(e) {
        e.preventDefault();
        var $row = $(this).closest('.form-row');
        var $container = $row.closest('[data-role="appendRow"]');
        
        // 删除当前行
        $row.remove();
        // 若剩余行数为1，隐藏删除按钮
        if ($container.find('.form-row').length === 1) {
            $container.find('[data-role="remove"]').hide();
        }
    });

    // 添加按钮点击事件
    $(document).on('click', '[data-role="appendRow"] .form-row [data-role="add"]', function(e) {
        e.preventDefault();
        var $container = $(this).closest('[data-role="appendRow"]');
        var $currentRow = $(this).closest('.form-row');
        var currentInputVal = $currentRow.find('input').val().trim();
        
        // 限制1：当前行输入框不能为空
        if (!currentInputVal) {
            alert('请先填写当前输入框内容');
            return;
        }

        // 限制2：最多添加5行（包含初始行）
        var maxRows = 5;
        if ($container.find('.form-row').length >= maxRows) {
            alert('最多只能添加' + maxRows + '行');
            return;
        }

        // 克隆新行并清空输入框
        var $newRow = $container.children('.form-row:first').clone();
        $newRow.find('input').val('');
        $container.append($newRow);

        // 行数大于1时，显示所有删除按钮
        $container.find('[data-role="remove"]').show();
    });
});

关键改动说明 #

1. 禁止删除首个元素：

   • 页面加载完成后，直接隐藏首个行的删除按钮
   • 删除任意行后，检查剩余行数，若只剩1行则自动隐藏删除按钮，从交互层面避免误删

2. 添加元素限制：

   • 输入验证：点击添加按钮前，先校验当前行输入框内容，为空则阻止添加并提示
   • 数量限制：设置最大行数阈值，超过则提示用户无法继续添加
   • 克隆新行时自动清空输入框，避免复制原有内容，提升用户体验

内容的提问来源于stack exchange，提问作者Jason