时间戳

首页 > 解决方案 > 删除按钮单击时重新排列附加的文本输入

javascript - 删除按钮单击时重新排列附加的文本输入

问题描述

我有一个添加按钮。当我单击它时，它会附加带有占位符选项 A、B、C、D、E 的新输入文本，每个都带有一个删除按钮。当我单击 c 的删除按钮时，它会显示顺序 A、B、D、E。但我需要安排 A,BD 替换为 C,E 替换为 C 。 第一张图片 第二张图片 第三张图片

<div class="form-group col-md-6 mb-2 input-group" id="optionList">
                                                                            <input type="text" class="form-control" id="myopt" placeholder="Option A" name="myopt[]" required><br>
                                                                            &nbsp;&nbsp;<button type="button" class="btn btn-icon rounded-circle btn-success glow mr-1 mb-1 add_field_button"><i class="bx bx-list-plus"></i></button>
                                                                        </div>

var x = 1; //initlal text box count
            var nex = 'A'.charCodeAt(0);
            $(add_button).click(function(e){ //on add input button click
                e.preventDefault();
                if(x < max_fields){ //max input box allowed
                    var curr = String.fromCharCode(nex+x++);
                    $(wrapper).append('<div class="input-group"><input type="text" class="form-control" id="myopt" placeholder="Option '+curr+'" name="myopt[]" required><button type="button" class="btn btn-icon rounded-circle btn-light-danger mr-1 mb-1 remove_field"><i class="bx bx-minus"></i></button><br></div>'); //add input box
                }
            });

标签： javascriptjquery

解决方案

您可以在单击删除按钮时添加如下代码。

您委托类型投标，$(wrapper).on('click', '.remove_field', function(e) {因此它将适用于动态添加的button.

单击删除父 div。

重置x和nex价值观。

循环input除first内部之外的所有内容wrapper并重置placeholder值。

$(wrapper).on('click', '.remove_field', function(e) {
    e.preventDefault();
    $(this).parent().remove();
    x = 1;
    nex = 'B'.charCodeAt(0);

    $(wrapper).find('input[type=text]:not(:first)').each(function(i, item) {
        x++; //text box increment
        var curr = String.fromCharCode(nex++);
        $(this).attr('placeholder', 'Option ' + curr);
    })
});

在这里测试一下。

var max_fields = 5; //maximum input boxes allowed
var wrapper = $("#optionList"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
var nex = 'B'.charCodeAt(0);

$('.add-btn').click(function(e) { //on add input button click
  e.preventDefault();
  if (x < max_fields) { //max input box allowed
    x++; //text box increment
    var curr = String.fromCharCode(nex++);
    $(wrapper).append('<div class="input-group"><input type="text" class="form-control" id="myopt" placeholder="Option ' + curr + '" name="myopt[]" required><button type="button" class="btn btn-icon rounded-circle btn-light-danger mr-1 mb-1 remove_field"><i class="bx bx-minus"></i>Remove</button><br></div>'); //add input box
  }
});

$(wrapper).on('click', '.remove_field', function(e) {
  e.preventDefault();
  $(this).parent().remove();
  x = 1;
  nex = 'B'.charCodeAt(0);
  $(wrapper).find('input[type=text]:not(:first)').each(function(i, item) {
    x++; //text box increment
    var curr = String.fromCharCode(nex++);
    $(this).attr('placeholder', 'Option ' + curr);
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type='button' class='add-btn' value='add'>

<div class="form-group col-md-6 mb-2 input-group" id="optionList">
  <input type="text" class="form-control" id="myopt" placeholder="Option A" name="myopt[]" required><br> &nbsp;&nbsp;
  <button type="button" class="btn btn-icon rounded-circle btn-success glow mr-1 mb-1 add_field_button"><i class="bx bx-list-plus"></i></button>
</div>

推荐阅读