Question

当我点击+按钮时，会出现带有+和-按钮的新文本框，此+按钮本身应该会消失。

当我点击-按钮时，文本框必须消失，并且应再次显示上一个+按钮。

帮我制作前面的按钮并相应消失。

这是我到目前为止所做的代码：

$(document).ready(function() {

  var wrapper = $(".input_fields_wrap");
  var add_button = $(".add_field_button");


  $(add_button).click(function(e) {
    e.preventDefault();

    var append1 = $(wrapper).append('<div><input type="text" name="mytext[]"/><button class="add_field_button1">+</button><button class="remove_field">-</button></div>');
    $(".add_field_button").hide();

  });

  $(wrapper).on("click", ".remove_field", function() {

    $(this).parent('div').remove();

  })
  $(wrapper).on("click", ".add_field_button1", function() {

    $("#inputfield").append('<div><input type="text" name="mytext[]"/><button class="add_field_button">+</button><button class="remove_field">-</button></div>');

  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
  <div id="inputfield">
    <input type="text" name="mytext[]">
    <button class="add_field_button">+</button>
  </div>
</div>

Answer 1

您好，请找到适用于您的方案的以下代码。

HTML：

<div class="input_fields_wrap">
    <button id=1 class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
</div>

我已将默认ID = 1添加到按钮

JS：

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper    
    var x = 1; //initlal text box count

    $('body').on("click",".add_field_button", function(e){
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(".add_field_button").hide();

           $(wrapper).append('<div> <button id='+x+' class="add_field_button"> Add More Fields </button> <input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box

            $("#"+x).show();
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
        $("#"+x).show();
    })
});

动态分配id = x以添加按钮。

我已经创建了它的演示，请找到相同

的JSFiddle https://jsfiddle.net/Prakash_Thete/xokqvxtk/

Answer 2

DEMO LINK

var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");

$('body').on("click", '.add_field_button', function (e) {
    var _this = $(this);
    e.preventDefault();
    _this.hide();
    _this.closest('.row').find('.remove_field').hide();

    var append1 = $(wrapper).append('<div class="row"><input type="text" name="mytext[]"/><button class="add_field_button">+</button><button class="remove_field">-</button></div>');


})


$(wrapper).on("click", ".remove_field", function () {
    var _row = $(this).closest('.row');
    _row.prev('.row').find('button').show();
    _row.remove();
})

.hidden{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap row">

    <div class="row">
    <input type="text" name="mytext[]">
    <button class="add_field_button">+</button>
    </div>

</div>

Answer 3

我无法完全理解这个要求，但从我能得到的情况来看，可能有两种情况：

1）点击＆＃39; - ＆＃39;按钮，上一个＆＃39; +＆＃39;按钮应该出现。
为此，只需将以下代码添加到“删除字段”即可。点击功能。

$(".add_field_button").show();

2）如果你想展示之前的＆＃39; +＆＃39;仅在删除所有输入字段后按钮，然后在＆＃39; remove_field＆＃39;中添加以下内容：点击功能。

var temp = $(".add_field_button1");
if(!temp) {
    $(".add_field_button").show();
}

通过这种方式，您可以检查是否存在任何动态添加的输入字段

Answer 4

创建另一个函数来返回动态字段，请检查代码

function createTexts(cnt){
    ret_str = '<div id="dv_'+cnt+'"><input type="text" name="mytext[]"/><button onclick='addmore('+cnt+')' class="add_field_button">+</button><button onclick='remove('+cnt+')' class="remove_field">-</button></div>';
}

将计数作为cnt参数传递，并创建函数addmore以追加和删除以删除具有该创建的元素id的项目。

Answer 5

只需检查下一个元素长度并启用div

$(wrapper).on("click",".remove_field", function(){ 

$(this).parent('div').remove();
  if($( ".add_field_button" ).next( ".new-elemnt" ).length <= 0)
  $(".add_field_button").show();

})

for refrence https://plnkr.co/edit/q9GTxkiHa1CjEpPAoP1x?p=preview

动态填充输入文本框并使用Jquery删除它们

5 个答案: